<selectmenu> 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 <selectmenu> lands in one of the browsers it's recommended to use the custom elements <x-selectmenu> and <x-option> directly and not use them as a polyfill.

This is to prevent breaking anything in the future if the native <selectmenu> API would change and you would be running a native selectmenu and a polyfilled selectmenu with misaligned API's.

<script type="module" src="https://cdn.jsdelivr.net/npm/selectmenu-polyfill/src/selectmenu.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/selectmenu-polyfill/src/option.min.js"></script>

<x-selectmenu>
  <x-option>Option 1</x-option>
  <x-option>Option 2</x-option>
  <x-option>Option 3</x-option>
</x-selectmenu>

See all examples

Caveats

• Firefox and Safari don't allow creating a shadow DOM on custom tags like selectmenu so the polyfill replaces selectmenu elements with x-selectmenu elements via a mutation observer. If you prefer your elements are not replaced use x-selectmenu directly.
• Safari doesn't render <option> content not nested in <select> so option elements nested under x-selectmenu are automatically replaced with x-option elements. Again if you prefer to keep the element instance intact use x-option elements directly.
• The native <option> has a :checked pseudo selector state. This is not possible to polyfill, so instead <x-option> adds the .\:checked CSS class to any selected option.

Related

• Popover polyfill
• Media Chrome