Shadow DOM

Recipe 12.2 Creating ARIA references

Sample:

Code:

<the-input></the-input>

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

    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      <label for="email">E-Mail</label>
      <input type="email" id="email" />
    `
  }
}

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