Can a skip link target an element in shadow DOM?

posted on

Back to overview


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.

<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>

<p id="light">Target in light</p>
<the-component id="parent"></the-component>
class TheComponent extends HTMLElement {
constructor() {
this.attachShadow({ mode: "open" });

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


customElements.define("the-component", TheComponent);
  1. Bring me to the light
  2. Bring me to the shadow
  3. Bring me to the shadow's parent

Target in light

Back to overview