Reference Target enables ID attributes like <label for>, aria-labelledby, popovertarget, and commandfor to be forwarded to elements inside a component's shadow DOM, while maintaining the shadow's encapsulation of its internal state. When a shadow host specifies an element in its shadow tree to act as its reference target, all ID references pointing to the shadow host are forwarded to the reference target element instead. <label for="my-checkbox">Checkbox value (click me to toggle checkbox)</label> <custom-checkbox id="my-checkbox"> <template shadowrootmode="open" shadowrootreferencetarget="real-checkbox"> <input id="real-checkbox" type="checkbox"> </template> </custom-checkbox> The reference target can be set declaratively like in the above example, or in JavaScript with ShadowRoot's referenceTarget property.
The Shadow DOM presents a problem for accessibility: there is not a way to establish semantic relationships between elements on in different shadow trees (such as via `aria-labelledby`). This limits the ability to design web components in a way that works with accessibility tools such as screen readers. The ARIAMixin IDL attributes (https://w3c.github.io/aria/#ARIAMixin) are a partial solution to the problem; however, they lack the ability to create a reference "into" a shadow tree from the outside. Reference Target is a solution to that missing piece of the problem. The specifics of the proposal are detailed in the linked explainer.
Samples: https://microsoftedge.github.io/Demos/reference-target
Explainers: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md