Can a skip link target an element in shadow DOM?

posted on 08.09.2023

Back to overview

No.

Element IDs are scoped within a shadow root. A link in light DOM can't find a target in shadow DOM, but of course, you can put an id on the custom element itself.

  <ol>
    <li><a href="#light">Bring me to the light</a></li>
    <li><a href="#shadow">Bring me to the shadow</a></li>
    <li><a href="#parent">Bring me to the shadow's parent</a></li>
  </ol>

  <p id="light">Target in light</p>
  <the-component id="parent"></the-component>

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

    const paragraph = document.createElement("p");
    paragraph.textContent = "Target in shadow";
    paragraph.setAttribute('id', 'shadow')

    this.shadowRoot.append(paragraph);
  }
}

customElements.define("the-component", TheComponent);

Back to overview