Can I tab to an element in shadow DOM?

posted on

Back to overview

Yes.

Attaching an interactive element to the shadow root of a component doesn't affect it in terms of its interactivity. You can hover it, click it, or focus it using the keyboard.

class TheButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    const button = document.createElement("button");
    button.textContent = "Click me";
    button.addEventListener('click', e => alert('yo!'))

    this.shadowRoot.append(button);
  }
}

customElements.define("the-button", TheButton);

Try pressing the Tab key until you find the button and then press Enter or Space.

Back to overview