<custom-select>

Add to project

The Web Component class

// main.js
import 'custom-select.js';

Styles

/* styles.css */
@import 'custom-select.css';

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, if there is no HTML element option with property selected.
selected	Defines initial value of the custom-select.

JS

Use public methods

◾ value (getter)

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

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

◾ value (setter)

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

◾ open / close / toggle

Shows or hides the option list.

const customSelect = document.querySelector('custom-select');
customSelect.open();
customSelect.close();
customSelect.toggle();

Subscribe to events

◾ change

<custom-select> 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'));

CSS

• custom-select.css can be fully customized
• 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
• there are some CSS variables, that can be utilized

<!-- The resulting DOM nodes for the reference -->
<custom-select name="programming-language" value="javascript">
  #shadow-root (open) ⤵
    <div part="base">JavaScript</div>
    <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>
  #(end shadow-root) ⤶
</custom-select>

Sizes

CSS variable	Affected parts	Default value
--base-min-height	base	2.5em
--base-padding-inline	base, option	0.5em
--base-icon-width	base	1em
--base-border-width	base, options	1px
--base-font-size	base	1em
--options-padding-block	options	0
--options-font-size	options	1em
--options-max-display-items	options	5
--option-padding-block	option	0.5em

Colors

CSS variable	Affected parts	Default value
--base-border-color	base	black
--base-border-color-hover	base	lightblue
--base-border-color-opened	base, options	lightblue
--base-background-color-opened	base, options	white
--base-color-opened	base, options	black
--option-background-color-hover	option	lightblue

Other

CSS variable	Affected parts	Default value
--base-shadow-opened	select	0px 2px 4px rgba(0 0 0 / 0.15)
--transition	base, icon, options, option	0.35s ease-in-out
--arrow-icon	icon	url('data:image/svg+xml, <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">