(SO) Move lightDOM to shadowDOM

move OPTIONs 2 ways

by Danny Engelman

HTML

<h1>
Move lightDOM OPTION 2 ways
</h1>
<template id=MY-ELEMENT>
  <style>
    :host {
      display: block;
    }

    select {
      font-size: 1.5em;
    }

  </style>
  <slot name=title></slot>
  <select multiple>
  </select>
  <slot></slot>
</template>

<my-element move=event>
  <option>Grow up</option>
  <option>Learn React</option>
  <h2 slot=title>My Never Todo List</h2>
</my-element>

<my-element>
  <option>Learn Lit</option>
  <option>Forget W3C standard Custom Elements API</option>
  <h2 slot=title>My Other Never Todo List</h2>
</my-element>

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor() {
      super().attachShadow({
        mode: 'open'
      }).append(document.getElementById(this.nodeName).content.cloneNode(true));
    }
    connectedCallback() {
      let select = this.shadowRoot.querySelector('select');
      if (this.hasAttribute("move")) {
        this.shadowRoot.addEventListener('slotchange', (evt) => {
          if (!evt.target.name) { // only for unnamed slot
            select.append(...evt.target.assignedNodes());
          }
        });
      } else {
        let host = this.shadowRoot.getRootNode().host;
        let options = host.querySelectorAll('option');
        select.append(...options);
      }
    }
  })

</script>

CSS

body {
  font-family:arial;
}