Are duplicate IDs allowed in separate shadow roots?

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