{"id":15645303,"url":"https://github.com/luwes/selectlist-polyfill","last_synced_at":"2025-04-15T11:52:18.662Z","repository":{"id":109910020,"uuid":"609717994","full_name":"luwes/selectlist-polyfill","owner":"luwes","description":"Polyfill for the selectlist element","archived":false,"fork":false,"pushed_at":"2023-08-10T09:39:50.000Z","size":151,"stargazers_count":57,"open_issues_count":11,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T22:02:35.481Z","etag":null,"topics":["custom-elements","polyfill","selectmenu","web-components"],"latest_commit_sha":null,"homepage":"https://selectlist-polyfill.vercel.app/examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luwes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-05T02:35:09.000Z","updated_at":"2025-04-06T20:49:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"2644eeca-3131-4999-b4d8-e9198c4764d5","html_url":"https://github.com/luwes/selectlist-polyfill","commit_stats":null,"previous_names":["luwes/selectlist-polyfill","luwes/selectmenu-polyfill"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fselectlist-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fselectlist-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fselectlist-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luwes%2Fselectlist-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luwes","download_url":"https://codeload.github.com/luwes/selectlist-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067556,"owners_count":21207392,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","polyfill","selectmenu","web-components"],"created_at":"2024-10-03T12:06:03.574Z","updated_at":"2025-04-15T11:52:18.639Z","avatar_url":"https://github.com/luwes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003cselectlist\u003e` polyfill\n\nBased on the proposal \n[open-ui.org/components/selectmenu](https://open-ui.org/components/selectmenu/)\nby [Open UI](https://github.com/openui/open-ui).\n\nThis polyfill depends on the \n[Popover API](https://developer.chrome.com/docs/web-platform/popover-api/) \nand comes with a light popover polyfill built-in.  \nSo it doesn't require the \n[Popover polyfill](https://github.com/oddbird/popover-polyfill) \nbut aims to be compatible if you wish to use these together.\n\nOne of the goals was to research and create it as closely to spec as possible\nand use the learnings for the implementation in\n[Media Chrome](https://github.com/muxinc/media-chrome).\n\n## Usage [Codesandbox](https://codesandbox.io/s/selectmenu-polyfill-6qky7m?file=/index.html)\n\nUntil the native `\u003cselectlist\u003e` lands in one of the browsers it's recommended \nto use the custom elements `\u003cx-selectlist\u003e` and `\u003cx-option\u003e` directly and not\nuse them as a polyfill. \n\nThis is to prevent breaking anything in the future \nif the native `\u003cselectlist\u003e` API would change and you would be running a native\nselectlist and a polyfilled selectlist with misaligned API's.\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/selectlist.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/option.min.js\"\u003e\u003c/script\u003e\n\n\u003cx-selectlist\u003e\n  \u003cx-option\u003eOption 1\u003c/x-option\u003e\n  \u003cx-option\u003eOption 2\u003c/x-option\u003e\n  \u003cx-option\u003eOption 3\u003c/x-option\u003e\n\u003c/x-selectlist\u003e\n```\n\n[See all examples](https://selectlist-polyfill.vercel.app/examples/)\n\n## Caveats\n\n- Firefox and Safari don't allow creating a shadow DOM\n  on custom tags like `selectlist` so the polyfill replaces `selectlist` elements\n  with `x-selectlist` elements via a mutation observer. If you prefer your elements\nare not replaced use `x-selectlist` directly.\n- Safari doesn't render `\u003coption\u003e` content not nested in `\u003cselect\u003e` so `option`\n  elements nested under `x-selectlist` are automatically replaced with `x-option` \n  elements. Again if you prefer to keep the element instance intact use `x-option`\n  elements directly.\n- The native `\u003coption\u003e` has a `:checked` pseudo selector state. This is not possible to polyfill, \n  so instead `\u003cx-option\u003e` adds the `.\\:checked` CSS class to any selected option.\n\n## Related \n\n- [Popover polyfill](https://github.com/oddbird/popover-polyfill)\n- [Media Chrome](https://github.com/muxinc/media-chrome)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluwes%2Fselectlist-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluwes%2Fselectlist-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluwes%2Fselectlist-polyfill/lists"}