Can I tab to an element in shadow DOM?

posted on

Back to overview


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() {
this.attachShadow({ mode: "open" });

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


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

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

Back to overview