<custom-select>

Add to project

As ES6 module from local file (download)

import 'custom-select.js';

As ES6 module from CDN

import 'https://cdn.jsdelivr.net/gh/avcat/custom-select/custom-select.min.js';

As external file from CDN

<script src="https://cdn.jsdelivr.net/gh/avcat/custom-select/custom-select.min.js"></script>

Use

HTML

Replace <select> HTML elements with <custom-select>:

<!-- Before -->
<select name="..." placeholder="...">
  <option value="..." selected>...</option>
  <option value="...">...</option>
  <option value="...">...</option>
</select>

<!-- After -->
<custom-select name="..." placeholder="...">
  <option value="..." selected>...</option>
  <option value="...">...</option>
  <option value="...">...</option>
</custom-select>

Property	Definition
name	Is utilized by form.
placeholder	Defines initial text of the select. Will be used, if there is no HTML element option with property selected.
selected	Defines initial value of the CustomSelect.

JS

Use public methods

value (getter) => @returns {string}

Shows current selected value, null if no option is selected.

const customSelect = document.querySelector('custom-select');
console.log(customSelect.value); // '42'

value (setter) {number|string}

Set an option with that value as selected. Numbers are treated as strings.

const customSelect = document.querySelector('custom-select');
customSelect.value = 42;
console.log(customSelect.value); // '42'

opened (getter) => @returns {boolean}

Gets the opened state of the CustomSelect component.

const customSelect = document.querySelector('custom-select');
console.log(customSelect.opened); // false

opened (setter) {boolean}

Sets the opened state of the CustomSelect component.

const customSelect = document.querySelector('custom-select');
customSelect.opened = true;
console.log(customSelect.opened); // true

toggle

Toggle the opened state of the CustomSelect component.

const customSelect = document.querySelector('custom-select');
customSelect.toggle();
console.log(customSelect.opened); // true
customSelect.toggle();
console.log(customSelect.opened); // false

checkValidity

Checks if element is considered valid. CustomSelect is invalid, if it has the required attribute, but does bot have a value.

const customSelect = document.querySelector('custom-select');
console.log(customSelect.checkValidity()); // false

Subscribe to events

CustomSelect emits its own change event, but you can add more custom events.

const customSelect = document.querySelector('custom-select');
customSelect.addEventListener('change', e => console.log('changed'));

Give custom name

The define() static property can be used to define a custom name for the HTML tag for this Web Component. It is useful for avoiding possible name conflicts.

The default value is custom-select.

CustomSelect.define(); // Can be used as <custom-select>
CustomSelect.define('another-select'); // Can be used as <another-select>

CSS

CSS can be customized: either inside the source file or through CSS variables.

To be able to affect a Web Component with external stylesheet, we use ::part(part-name) syntax.

Some CSS properties are still inherited from the outside: font-size, font-family, color.

<!-- The resulting DOM nodes for the reference -->
<custom-select name="programming-language" value="javascript">
  #shadow-root (open) ⤵
    <div part="base">JavaScript</div>
    <input type="checkbox" tabindex="-1">
    <div part="options-wrapper">
      <ul part="options">
        <li part="option" value="javascript" selected="">JavaScript</li>
        <li part="option" value="python">Python</li>
        <li part="option" value="java">Java</li>
      </ul>
    </div>
  #(end shadow-root) ⤶
</custom-select>

Sizes

--select-border-radius: 0;
--base-min-height: 2.5em;
--base-padding-inline: 0.5em;
--base-icon-width: 1em;
--base-border-width: 0.1em;
--base-font-size: 1em;
--options-padding-block: 0;
--options-font-size: 1em;
--options-max-display-items: 5;
--option-padding-block: 0.5em;

Colors

--base-border-color: black;
--base-border-color-hover: lightblue;
--base-background-color-hover: white;
--base-border-color-opened: lightblue;
--base-background-color-opened: white;
--base-color-opened: black;
--option-background-color-hover: lightblue;

Other

--transition-duration: 0.3s;
--transition-timing-function: ease;
--arrow-icon: url('data:image/svg+xml, &lt;svg fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg&gt;');