A wrapper element that augments a
<select> with previous/next controls.
Import and register the
<select-control> custom element, upgrading any
instances already in the DOM:
import SelectControl from '../../literal/documentation/templates/select-control.js';
<select-control> element wraps a
<select>, augmenting it
with styleable previous/next buttons and left/right arrow keyboard behaviour:
<select-control> <select>...</select> </select-control>
Default content of previous and next buttons may be overridden with HTML
assigned to the
<select-control> <span slot="previous-button">☚</span> <span slot="next-button">☛</span> <select>...</select> </select-control>
Note that the element itself is not a custom form element (it has no
property and does not set any form data in its internals).
.5rem; Width of decrement/increment buttons.
Replace default content of the decrement button (
"◀") with custom HTML.
Replace default content of the increment button (
"▶") with custom HTML.
Support development: Sponsor