<selectlist>
polyfillBased 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.
Until the native <selectlist>
lands in one of the browsers it's recommended
to use the custom elements <x-selectlist>
and <x-option>
directly and not
use them as a polyfill.
This is to prevent breaking anything in the future
if the native <selectlist>
API would change and you would be running a native
selectlist and a polyfilled selectlist with misaligned API's.
<script type="module" src="https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/selectlist.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/option.min.js"></script>
<x-selectlist>
<x-option>Option 1</x-option>
<x-option>Option 2</x-option>
<x-option>Option 3</x-option>
</x-selectlist>
selectlist
so the polyfill replaces selectlist
elementsx-selectlist
elements via a mutation observer. If you prefer your elementsx-selectlist
directly.<option>
content not nested in <select>
so option
x-selectlist
are automatically replaced with x-option
x-option
<option>
has a :checked
pseudo selector state. This is not possible to polyfill,<x-option>
adds the .\:checked
CSS class to any selected option.