Add reference target to shadow root

[dandclark]

Reference Target is a feature to enable using IDREF attributes such as for and aria-labelledby to refer to elements inside a component's shadow DOM, while maintaining encapsulation of the internal details of the shadow DOM. The main goal of this feature is to enable ARIA to work across shadow root boundaries.

In this change, add the referenceTarget property to ShadowRoot and add a definition of reference target that's exported for use in other specs.

See the reference target explainer.

• At least two implementers are interested (and none opposed):
  • Reference Target for Cross-Root ARIA mozilla/standards-positions#1035 (no position stated yet)
  • Reference Target for Cross-Root ARIA WebKit/standards-positions#356 (no position stated yet)
• Tests are written and can be reviewed and commented upon at:
  • https://wpt.fyi/results/shadow-dom/reference-target/tentative
  • PR to make non-tentative: Make reference target non-tentative web-platform-tests/wpt#51213
• Implementation bugs are filed:
  • Chromium: https://issues.chromium.org/issues/346835896/
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1952585
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=285634
• MDN issue is filed: …
• The top of this comment includes a clear commit message to use.

---

Preview | Diff

[smaug----]

I'm still not quite sure, if it is good to have this v1 API and then more complicated v2, or could we have just one API.

[smaug----]

Or whether this API should look a bit different so that adding v2 would feel a bit less weird.

Just as an example, not proposing this... what if this was more like
attribute ReferenceTarget referenceTarget;

and then
interface ReferenceTarget {
attribute DOMString? default;
// v2 would add more attributes
}

[annevk]

Where is the sketch for v2? We should at least have an idea on what this transition will look like. Did someone write that out?

[dandclark]

Sorry for the slow follow up here -- v2 is sketched out at https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md#-phase-2-shadowroot-referencetargetmap-attribute.

That examples in that proposal imply an IDL like this:

interface ShadowRoot : DocumentFragment {
  // ...
  attribute DOMString? referenceTarget;
  attribute ReferenceTargetMap referenceTargetMap; // added in Phase 2.
}

// Added in Phase 2:
interface ReferenceTargetMap {
  DOMString? ariaControls;
  DOMString? ariaActiveDescendant;
  DOMString? htmlFor;
  // etc...
}

So the behavior would be that shadowRoot.referenceTarget is the default, and is overridden by any non-null values in the ReferenceTargetMap.

I can see an argument for grouping everything together into a single ReferenceTarget interface, but I do think it'd be nice to keep the simple case simple and allow a direct shadowRoot.referenceTarget = "target" rather than requiring the additional indirection shadowRoot.referenceTarget.default = "target". Either design seems basically reasonable though.

[annevk]

Where is the sketch for v2? We should at least have an idea on what this transition will look like. Did someone write that out?