Targeting by Reference in the Shadow DOM

"like how it can break accessibility in a number of ways. One of those things is how it breaks stuff like the commandFor attribute on <button>s, or the popoverTarget attribute, or a variety of ARIA attributes such as aria-labelledby. This happens because a Shadow DOMmed component creates a whole separate node tree, which creates a barrier (for a lot of things, to be clear; this is just one class of them)."

"At least, that's been the case. There's now a proposal to fix that, and prototype implementations in both Chrome and Safari! In Chrome, it's covered by the Experimental Web Platform features flag in chrome://flags. In Safari, you open the Develop > Feature Flags... dialog, search for "referenceTarget", and enable both flags. (Disclosure: My employer, Igalia, with support from NLnet, did the WebKit implementation, and also a Gecko implementation that's being reviewed as I write this.)"

A proposal introduces a shadowRootReferenceTarget attribute and ShadowRoot.referenceTarget API to allow host references to point at elements inside a component's Shadow DOM, removing the usual node-tree barrier. Prototype implementations exist in Chrome behind the Experimental Web Platform features flag and in Safari via the Develop > Feature Flags dialog by enabling referenceTarget flags. The template-level attribute accepts a string identifying an internal element that should be the target of references. This makes attributes like label for, button commandFor, popoverTarget, and ARIA attributes such as aria-labelledby resolve correctly to shadowed elements. Igalia implemented WebKit and produced a Gecko implementation with NLnet support.

Read at Meyerweb