logo polydile dile-components


Mixin to select one item from a list.

This mixin declares two properties to make a selection component and listen dile-item-selected event to change the selected item of the list.


npm i @dile/dile-selector-mixin


To use it you only need to extend your custom element class with the mixin.

import { DileSelectorMixin } from '@dile/dile-selector-mixin';

class MyElement extends DileSelectorMixin(HTMLElement) {
  // your custom element code...


To do it's work, the list of components that should be selected must be in the light DOM of the component.

  <selector-item>Item 1</selector-item>
  <selector-item selected>Item 2</selector-item>
  <selector-item>Item 3</selector-item>

The items should dispatch a dile-item-selected event to inform that this component is selected now. The selected component itself must be detailed inside the event.

this.dispatchEvent(new CustomEvent('dile-item-selected', {
  bubbles: true,
  composed: true,
  detail: this


Implementations of DileSelectorMixin

There are some components that implements DileSelectorMixin.