Light DOM

Recipe 12.2 Creating ARIA references

Sample:

Code:

<label for="email">E-Mail</label>

<the-input>
  <input type="email" id="email" />
</the-input>

<script>
  class TheInput extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `<slot></slot>`
  }
}

customElements.define("the-input", TheInput);
</script>