polyfill

Based on the proposal
open-ui.org/components/selectmenu
by Open UI.

This polyfill depends on the
Popover API
and comes with a light popover polyfill built-in.
So it doesn't require the
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.

Usage Codesandbox

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

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
- Media Chrome

Show more