Are duplicate IDs allowed in separate shadow roots?

Question

tl;dr:

1. Is it valid to have two elements with the same ID attribute, as long as both are under separate shadow roots?
2. Would screen readers handle aria-labelledby correctly in such situation?

---

For example, consider this custom element:

(function () {
  let template = document.createElement('template')
  template.innerHTML = `
    <svg viewBox="0 0 206 74"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         role="img"
         aria-labelledby="logo-title">
      <title id="logo-title"><slot>Logo of Some Company.</slot></title>

      <path d="..." fill="..."/>
    </svg>
  `

  class Logo extends HTMLElement {
    constructor () {
      super()

      let shadowRoot = this.attachShadow({mode: 'open'})
      shadowRoot.appendChild(template.content.cloneNode(true))
    }
  }

  customElements.define('company-logo', Logo)
})()

Would it be valid to do:

<company-logo>
  Title One.
</company-logo>

<company-logo>
  Some other title.
</company-logo>

Would this be a valid DOM, even when both <title>'s share the same ID? Would screen readers read "Title One" for the first logo, and "Some other title" for the second logo?

Answer 1

You can have multiple instances of the same custom element on the same page, so the inner Shadow DOM will share by design the same IDs.

As far as the standards are concerned...

• W3C's HTML5 Rec doesn't include Shadow DOM so it not a subject for them.

• WHATWG's HTML Living Standard states that a ID should be unique among the node tree, but doesn't precise if the flattened tree (combination of the Light DOM trees and Shadow DOM trees) is concerned. For my understanding the specs doesn't say it not valid :-)

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character.

Actually it's not a problem for the browsers to deal with identical IDs.

I don't think Aria Labels can cross Shadow DOM, it should depend on browser implementation. Here again the specs says nothing on Shadow DOM.

---

2019 Update

As stated in Google's introduction sur Shadow DOM:

Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts.

Indeed the fact that Shadow DOM lets you create Web Components that you can distribute and reuse, the probability that inner IDs will match other IDs of other components in the same page but developped by other developers is high and the Scoped DOM is a good answer.

---

2020 Update

Note the Shadow DOM / ARIA issue is still being discussed.

The future AOM (Accessibility Object Model) will permit to solve this kind of question programmatically.

You'll be able to link elements not only by id labels, but also by reference:

element.ariaLabelledByElements = [ anotherElement, someOtherElement ]

No need to deal with IDs uniqueness, and possibility to cross Shadow DOM boundaries :-) maybe someday :-(