<select-control>

A wrapper element that augments a <select> with previous/next controls.

Import

Import and register the <select-control> custom element, upgrading any instances already in the DOM:

import SelectControl from '../../literal/documentation/templates/select-control.js';

Use

The <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 previous-button and next-button slots:

<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 value property and does not set any form data in its internals).