bennypowers / mixins

Useful mixins for custom-element authors

@pwrs/mixins

Useful mixins for custom-element authors.

SelectMixin

Manages the state of a [multi-]select element, e.g. a dropdown or a data table.

class SelectElement extends SelectMixin(LitElement) {
  static allowedChildren = ['select-item']
}

  <select-element>
    <select-item></select-item>
    <select-item></select-item>
    <select-item></select-item>
  </select-element>

See SelectMixin README

FireMixin

<fire-element></fire-element>

<script defer async>
  document.querySelector("fire-element")
    .addEventListener('😛', e => console.log(e.detail));

  customElements.define('fire-element',
    class FireElement extends FireMixin(HTMLElement) {
      connectedCallback() {
        this.fire('😛', 'Haha!');
      }
    });

</script>

logs: Haha!;

See FireMixin README