The bug that only exists inside shadow DOM

4 July 2026 · accessibility · security

Here is a defect that a light-DOM accessibility checker cannot see, by construction.

A component puts its label and its input inside a shadow root and wires them together:

<label id="email-label">Email</label>
<input aria-labelledby="email-label">

Looks correct. It is not. If that <label> lives in the light DOM and the <input> lives inside a shadow root — or the two sit in different shadow roots — the aria-labelledby reference never resolves. IDREFs do not cross the shadow boundary. The input has no accessible name, and no tool that stops at the shadow edge will tell you, because it never looked inside.

Two disciplines have the same blind spot here. The accessibility scanner doesn't descend, so it misses the broken name. The security scanner doesn't descend, so it misses the inline handler or javascript: URL a component template smuggled in. Same boundary, two failures.

So shadow-dom-auditor descends, and reports both from one pass. It flags the cross-root IDREF as what it is:

ERROR aria-idref-broken [shadow]  cross-root idrefs never resolve

Access and security are not adjacent concerns you bolt together. They are the same concern seen from two sides. The shadow boundary is just where that happens to be obvious.

— technika11y