Reference Target for Cross-Root ARIA
Reference Target is a new feature for Shadow DOM to enable the use of IDREF attributes such as for and aria-labelledby to refer to elements inside a shadow tree, while maintaining encapsulation of the internal details of the shadow tree. A driving goal of this feature is to enable ARIA to work across shadow root boundaries.
A custom element that hosts a shadow tree can specify the ID of an element in its shadow tree to act as its "reference target", for example a <fancy-input> component might have an <input> element inside, and set it as the reference target. When the host component is the target of a IDREF like a label's for attribute, the reference target becomes the effective target of the label instead.
The shadow root specifies the ID of the target element either in JavaScript with the referenceTarget attribute on the ShadowRoot object, or in HTML markup using the shadowrootreferencetarget attribute on the <template> element for a declarative shadow root.
Explainer: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md
Design document: https://docs.google.com/document/d/1c8gNwtCREEBZ2itt6poKdmQyS1tjdA_Dk69ly3XVZkk
Chrome Status: https://chromestatus.com/feature/5188237101891584
Bug: 346835896
Change-Id: If4da0ba56e2788815c0e903400c730f348361996
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5615615
Reviewed-by: Aaron Leventhal aleventhal@chromium.org
Commit-Queue: Ben Howell behowell@microsoft.com
Reviewed-by: Mason Freed masonf@chromium.org
Cr-Commit-Position: refs/heads/main@{#1342460}