demo · v135

Cross-tree reference graph

A live graph of how ariaActiveDescendantElement, ariaControlsElements, and ariaLabelledByElements connect a custom element in the light DOM to slot targets across two shadow trees. The same connection through aria-labelledby="id" is impossible — IDs don’t cross shadow boundaries. Toggle between the two to see the difference.

element reflection: ?

DOM structure

<main>
  <my-combobox id="combo">
    #shadow-root
      <input role="combobox"/>
  </my-combobox>
  <ul id="opts">
    #shadow-root
      <li role="option" id="opt1">A</li>
      <li role="option" id="opt2">B</li>
  </ul>
</main>

edges (active)

combobox option A option B

no binding active

see also