Skip to content

Add reference target to shadow root #1353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add reference target to shadow root #1353

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e06f903
Add reference target to shadow root
dandclark Feb 4, 2025
9ce89ff
Merge branch 'main' into dandclark/reference-target
dandclark May 6, 2025
496ccae
Make order consistent with other ShadowRoot properties
dandclark May 6, 2025
64676d6
Add type declaration for ShadowRoot reference target
dandclark May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 21 additions & 6 deletions dom.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4587,8 +4587,9 @@ and an optional <a for=/>document</a> <dfn export for="clone a node"><var>docume
<li><p><a>Attach a shadow root</a> with <var>copy</var>, <var>node</var>'s
<a for=Element>shadow root</a>'s <a for=ShadowRoot>mode</a>, true, <var>node</var>'s
<a for=Element>shadow root</a>'s <a for=ShadowRoot>serializable</a>, <var>node</var>'s
<a for=Element>shadow root</a>'s <a for=ShadowRoot>delegates focus</a>, and <var>node</var>'s
<a for=Element>shadow root</a>'s <a for=ShadowRoot>slot assignment</a>.
<a for=Element>shadow root</a>'s <a for=ShadowRoot>delegates focus</a>, <var>node</var>'s
<a for=Element>shadow root</a>'s <a for=ShadowRoot>slot assignment</a>, and <var>node</var>'s
<a for=Element>shadow root</a>'s <a for=ShadowRoot>reference target</a>.

<li><p>Set <var>copy</var>'s <a for=Element>shadow root</a>'s <a for=ShadowRoot>declarative</a>
to <var>node</var>'s <a for=Element>shadow root</a>'s <a for=ShadowRoot>declarative</a>.
Expand Down Expand Up @@ -6057,6 +6058,7 @@ interface ShadowRoot : DocumentFragment {
readonly attribute boolean clonable;
readonly attribute boolean serializable;
readonly attribute Element host;
attribute DOMString? referenceTarget;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

attribute EventHandler onslotchange;
};

Expand Down Expand Up @@ -6092,6 +6094,9 @@ It is initially set to false.</p>
<p><a for=/>Shadow roots</a> have an associated <dfn for=ShadowRoot>serializable</dfn> (a boolean).
It is initially set to false.</p>

<p><a for=/>Shadow roots</a> have an associated <dfn export for=ShadowRoot>reference target</dfn>.
It is initially set to null.</p>

<p>A <a for=/>shadow root</a>'s <a>get the parent</a> algorithm, given an <var>event</var>, returns
null if <var>event</var>'s <a>composed flag</a> is unset and <a for=/>shadow root</a> is the
<a for=tree>root</a> of <var>event</var>'s <a for=Event>path</a>'s first struct's
Expand All @@ -6116,6 +6121,12 @@ null if <var>event</var>'s <a>composed flag</a> is unset and <a for=/>shadow roo
<p>The <dfn attribute for=ShadowRoot><code>host</code></dfn> getter steps are to return
<a>this</a>'s <a for=DocumentFragment>host</a>.

<p>The <dfn attribute for=ShadowRoot><code>referenceTarget</code></dfn> getter steps are to return
<a>this</a>'s <a for=ShadowRoot>reference target</a>.

<p>The {{ShadowRoot/referenceTarget}} setter steps are to set
<a>this</a>'s <a for=ShadowRoot>reference target</a> to the given value.

<p>The <dfn attribute for=ShadowRoot><code>onslotchange</code></dfn> attribute is an
<a>event handler IDL attribute</a> for the
<dfn for=ShadowRoot export><code>onslotchange</code></dfn> <a>event handler</a>, whose
Expand Down Expand Up @@ -6246,6 +6257,7 @@ dictionary ShadowRootInit {
SlotAssignmentMode slotAssignment = "named";
boolean clonable = false;
boolean serializable = false;
DOMString? referenceTarget = null;
};
</pre>

Expand Down Expand Up @@ -7099,8 +7111,9 @@ are:
<li><p>Run <a>attach a shadow root</a> with <a>this</a>,
<var>init</var>["{{ShadowRootInit/mode}}"], <var>init</var>["{{ShadowRootInit/clonable}}"],
<var>init</var>["{{ShadowRootInit/serializable}}"],
<var>init</var>["{{ShadowRootInit/delegatesFocus}}"], and
<var>init</var>["{{ShadowRootInit/slotAssignment}}"].
<var>init</var>["{{ShadowRootInit/delegatesFocus}}"],
<var>init</var>["{{ShadowRootInit/slotAssignment}}"], and
<var>init</var>["{{ShadowRootInit/referenceTarget}}"].

<li><p>Return <a>this</a>'s <a for=Element>shadow root</a>.
</ol>
Expand All @@ -7109,8 +7122,8 @@ are:
<div algorithm>
<p>To <dfn id=concept-attach-a-shadow-root>attach a shadow root</dfn>, given an
<a for=/>element</a> <var>element</var>, a string <var>mode</var>, a boolean <var>clonable</var>,
a boolean <var>serializable</var>, a boolean <var>delegatesFocus</var>, and a string
<var>slotAssignment</var>:
a boolean <var>serializable</var>, a boolean <var>delegatesFocus</var>, a string
<var>slotAssignment</var>, and null or a string <var>referenceTarget</var>:

<ol>
<li><p>If <var>element</var>'s <a for=Element>namespace</a> is not the <a>HTML namespace</a>,
Expand Down Expand Up @@ -7178,6 +7191,8 @@ a boolean <var>serializable</var>, a boolean <var>delegatesFocus</var>, and a st

<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>slot assignment</a> to <var>slotAssignment</var>.

<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>reference target</a> to <var>referenceTarget</var>.

<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>declarative</a> to false.

<li><p>Set <var>shadow</var>'s <a for=ShadowRoot>clonable</a> to <var>clonable</var>.
Expand Down