A new browser proposal called Reference Target aims to fix a long-standing Shadow DOM limitation: elements inside a Shadow DOM tree cannot be targeted by ID-based references from the light DOM, breaking accessibility attributes like aria-labelledby, aria-controls, and HTML attributes like for, popoverTarget, and commandFor. The proposal introduces a shadowRootReferenceTarget attribute on the <template> element (and a referenceTarget option in the attachShadow() JS API) that lets a Shadow DOM component declare an internal element as the effective target for any external references. Prototype implementations exist in Chrome (behind an experimental flag) and Safari (via Feature Flags). Igalia, with NLnet support, implemented it in WebKit and is working on a Gecko implementation. Developers are encouraged to test their use cases and leave feedback on the WICG GitHub issue.
