https://github.com/luwes/selectlist-polyfill
Polyfill for the selectlist element
https://github.com/luwes/selectlist-polyfill
custom-elements polyfill selectmenu web-components
Last synced: 11 months ago
JSON representation
Polyfill for the selectlist element
- Host: GitHub
- URL: https://github.com/luwes/selectlist-polyfill
- Owner: luwes
- Created: 2023-03-05T02:35:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-10T09:39:50.000Z (over 2 years ago)
- Last Synced: 2025-04-09T22:02:35.481Z (11 months ago)
- Topics: custom-elements, polyfill, selectmenu, web-components
- Language: JavaScript
- Homepage: https://selectlist-polyfill.vercel.app/examples/
- Size: 147 KB
- Stars: 57
- Watchers: 3
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# `` polyfill
Based on the proposal
[open-ui.org/components/selectmenu](https://open-ui.org/components/selectmenu/)
by [Open UI](https://github.com/openui/open-ui).
This polyfill depends on the
[Popover API](https://developer.chrome.com/docs/web-platform/popover-api/)
and comes with a light popover polyfill built-in.
So it doesn't require the
[Popover polyfill](https://github.com/oddbird/popover-polyfill)
but aims to be compatible if you wish to use these together.
One of the goals was to research and create it as closely to spec as possible
and use the learnings for the implementation in
[Media Chrome](https://github.com/muxinc/media-chrome).
## Usage [Codesandbox](https://codesandbox.io/s/selectmenu-polyfill-6qky7m?file=/index.html)
Until the native `` lands in one of the browsers it's recommended
to use the custom elements `` and `` directly and not
use them as a polyfill.
This is to prevent breaking anything in the future
if the native `` API would change and you would be running a native
selectlist and a polyfilled selectlist with misaligned API's.
```html
Option 1
Option 2
Option 3
```
[See all examples](https://selectlist-polyfill.vercel.app/examples/)
## Caveats
- Firefox and Safari don't allow creating a shadow DOM
on custom tags like `selectlist` so the polyfill replaces `selectlist` elements
with `x-selectlist` elements via a mutation observer. If you prefer your elements
are not replaced use `x-selectlist` directly.
- Safari doesn't render `` content not nested in `` so `option`
elements nested under `x-selectlist` are automatically replaced with `x-option`
elements. Again if you prefer to keep the element instance intact use `x-option`
elements directly.
- The native `` has a `:checked` pseudo selector state. This is not possible to polyfill,
so instead `` adds the `.\:checked` CSS class to any selected option.
## Related
- [Popover polyfill](https://github.com/oddbird/popover-polyfill)
- [Media Chrome](https://github.com/muxinc/media-chrome)