UI: Components

Select

Small polyfill / web component for the new stylable <select>-standard, using the popover API.

With opposite color-scheme

With right-to-left

The new syntax

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  <datalist>
   <option>one</option>
   <option>two</option>
  </datalist>
</select>

Is turned into:

<ui-select>
  <button popovertarget></button>
  <ui-datalist popover>
    <ui-option>one</ui-option>
    <ui-option>two</ui-option>
  </ui-datalist>
</ui-select>