Add Scoped Custom Element Registries #1341

annevk · 2024-12-17T17:30:55Z

Please do not comment directly on this PR unless asked. It's a big change and we want to keep it manageable. Use #1339 instead.

HTML PR: whatwg/html#10869.

Tests: web-platform-tests/wpt#50790.

At least two implementers are interested (and none opposed):
- WebKit
- …
Tests are written and can be reviewed and commented upon at:
- Export WebKit's tests for revamped scoped custom element registry. web-platform-tests/wpt#50790
- DOM: rename importNode()'s deep to selfOnly (and invert its value) web-platform-tests/wpt#50860
- TODO: PR to make them non-tentative
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/399124619
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1874414
- WebKit: N/A
MDN issue is filed: Scoped Custom Element Registries mdn/content#38266
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

Preview | Diff

Do not comment directly on this PR while it is in draft state. Use #10854 instead. DOM PR: whatwg/dom#1341. Tests: ...

DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.

HTML PR: whatwg/html#10869. Tests: ... Closes #1339.

DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.

Part of whatwg/dom#1341.

For whatwg/dom#1341.

…nly (and invert its value), a=testonly Automatic update from web-platform-tests DOM: rename importNode()'s deep to selfOnly (and invert its value) Part of whatwg/dom#1341. -- wpt-commits: 5bcf44cb07a74e284893af96926d932ec09705e7 wpt-pr: 50860

…ith scoped registries, a=testonly Automatic update from web-platform-tests DOM: createElement and createElementNS with scoped registries For whatwg/dom#1341. -- wpt-commits: a52f97983743aae5fdd5172c9938b47743dc7146 wpt-pr: 50925

…nly (and invert its value), a=testonly Automatic update from web-platform-tests DOM: rename importNode()'s deep to selfOnly (and invert its value) Part of whatwg/dom#1341. -- wpt-commits: 5bcf44cb07a74e284893af96926d932ec09705e7 wpt-pr: 50860

…ith scoped registries, a=testonly Automatic update from web-platform-tests DOM: createElement and createElementNS with scoped registries For whatwg/dom#1341. -- wpt-commits: a52f97983743aae5fdd5172c9938b47743dc7146 wpt-pr: 50925

…nly (and invert its value), a=testonly Automatic update from web-platform-tests DOM: rename importNode()'s deep to selfOnly (and invert its value) Part of whatwg/dom#1341. -- wpt-commits: 5bcf44cb07a74e284893af96926d932ec09705e7 wpt-pr: 50860 UltraBlame original commit: 4a4c1689ebd912108057f71fa24393009d4ab18a

…ith scoped registries, a=testonly Automatic update from web-platform-tests DOM: createElement and createElementNS with scoped registries For whatwg/dom#1341. -- wpt-commits: a52f97983743aae5fdd5172c9938b47743dc7146 wpt-pr: 50925 UltraBlame original commit: 78ef3074b0082c9e95d840a8010b34661973a847

…nly (and invert its value), a=testonly Automatic update from web-platform-tests DOM: rename importNode()'s deep to selfOnly (and invert its value) Part of whatwg/dom#1341. -- wpt-commits: 5bcf44cb07a74e284893af96926d932ec09705e7 wpt-pr: 50860 UltraBlame original commit: 4a4c1689ebd912108057f71fa24393009d4ab18a

…ith scoped registries, a=testonly Automatic update from web-platform-tests DOM: createElement and createElementNS with scoped registries For whatwg/dom#1341. -- wpt-commits: a52f97983743aae5fdd5172c9938b47743dc7146 wpt-pr: 50925 UltraBlame original commit: 78ef3074b0082c9e95d840a8010b34661973a847

…nly (and invert its value), a=testonly Automatic update from web-platform-tests DOM: rename importNode()'s deep to selfOnly (and invert its value) Part of whatwg/dom#1341. -- wpt-commits: 5bcf44cb07a74e284893af96926d932ec09705e7 wpt-pr: 50860 UltraBlame original commit: 4a4c1689ebd912108057f71fa24393009d4ab18a

…ith scoped registries, a=testonly Automatic update from web-platform-tests DOM: createElement and createElementNS with scoped registries For whatwg/dom#1341. -- wpt-commits: a52f97983743aae5fdd5172c9938b47743dc7146 wpt-pr: 50925 UltraBlame original commit: 78ef3074b0082c9e95d840a8010b34661973a847

…nly (and invert its value), a=testonly Automatic update from web-platform-tests DOM: rename importNode()'s deep to selfOnly (and invert its value) Part of whatwg/dom#1341. -- wpt-commits: 5bcf44cb07a74e284893af96926d932ec09705e7 wpt-pr: 50860

…ith scoped registries, a=testonly Automatic update from web-platform-tests DOM: createElement and createElementNS with scoped registries For whatwg/dom#1341. -- wpt-commits: a52f97983743aae5fdd5172c9938b47743dc7146 wpt-pr: 50925

DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.

justinfagnani · 2025-03-18T22:24:12Z

dom.bs

+ otherwise null.
+</dl>
+
+<p>The <dfn attribute for=DocumentOrShadowRoot><code>customElementRegistry</code></dfn> getter steps


Are there setter steps for shadow roots with keep custom element registry null set to true?

No, you have to use the initialize() API.

justinfagnani · 2025-03-18T22:36:16Z

dom.bs

+<p><a for=/>Shadow roots</a> have an associated
+<dfn for=ShadowRoot>keep custom element registry null</dfn> (a boolean). It is initially false.
+
+<p class=note>This can only ever be true in combination with declarative shadow roots. And it only


Are there any cases where we want to be able to programmatically create shadow roots that emulate declarative shadow roots with a null registry?

I think this might be the first instance where we can't imperatively make a shadow root that matches a declarative shadow root. That should be an issue for polyfilling (true polyfills after some browsers have shipped) things for DSD.

For instance, to polyfill this feature, we would need to prevent declarative shadow roots from using the global registry. So we would have to emit on the server templates with an alternate shadowrootmode attribute, and imperatively instantiate the shadow roots, and record the fact that it had shadowrootcustomelementregistry attribute.

If a future feature required a similar technique, then either we'd need to be able to set this option when creating the shadow root or be able to set a shadow root's registry to null.

You already can't create all declarative shadow roots. Only declarative shadow roots have the declarative bit set, for instance.

foolip

Note to self: editorial review done up the "Elements have an associated" bit.

foolip · 2025-03-20T13:26:22Z

dom.bs

@@ -2830,9 +2830,22 @@ before a <var>child</var>, with an optional <i>suppress observers flag</i>, run
     <li><p>Run the <a>insertion steps</a> with <var>inclusiveDescendant</var>.

     <li>
-      <p>If <var>inclusiveDescendant</var> is <a>connected</a>:
+      <p>If <var>inclusiveDescendant</var> is <a>connected</a> and is an <a for=/>element</a>:


In order to simplify the conditions, how about a "If inclusiveDescendant is not connected, continue." step before this?

foolip · 2025-03-20T13:29:11Z

dom.bs

+       null, then set <var>inclusiveDescendant</var>'s <a for=Element>custom element registry</a> to
+       the result of <b>looking up a custom element registry</b> given
+       <var>inclusiveDescendant</var>'s <a for=tree>parent</a>.
+       <!-- XXX xref -->


Is the idea to land both PRs and then wait until HTML is scraped into Bikeshed's data files before updating DOM to fix these refs?

How about adding to <pre class=anchors> or something to get it right when it first lands?

foolip · 2025-03-20T15:12:19Z

dom.bs

+       <li><p>If <li><var>inclusiveDescendant</var>'s <a for=ShadowRoot>custom element registry</a>
+       is null and <li><var>inclusiveDescendant</var>'s


Accidental list items here:

Suggested change

<li>If <li><var>inclusiveDescendant</var>'s <a for=ShadowRoot>custom element registry</a>

is null and <li><var>inclusiveDescendant</var>'s

<li>If <var>inclusiveDescendant</var>'s <a for=ShadowRoot>custom element registry</a>

is null and <var>inclusiveDescendant</var>'s

foolip · 2025-03-20T15:17:49Z

dom.bs

+are:
+
+<ol>
+ <li><p class="XXX">Handle the document node case.


I know this is unfinished, but how will this work, what's it for? Documents don't have a custom element registry now, and initialize() doesn't accept a Document argument.

foolip · 2025-03-20T15:24:10Z

dom.bs

+<dfn export for="clone a node"><var>parent</var></dfn> (default null), and null or a
+{{CustomElementRegistry}} object <dfn export for="clone a node"><var>fallbackRegistry</var></dfn>


Similar to the style suggestion in the HTML PR:

Suggested change

<dfn export for="clone a node"><var>parent</var></dfn> (default null), and null or a

{{CustomElementRegistry}} object <dfn export for="clone a node"><var>fallbackRegistry</var></dfn>

<dfn export for="clone a node"><var>parent</var></dfn> (default null), and a

{{CustomElementRegistry}}-or-null <dfn export for="clone a node"><var>fallbackRegistry</var></dfn>

foolip · 2025-03-20T16:35:18Z

dom.bs

+<ol>
+ <li><p>Let <var>registry</var> be null.
+
+ <li><li>Let <var>is</var> be null.


Suggested change

<li><li>Let <var>is</var> be null.

<li>Let <var>is</var> be null.

foolip · 2025-03-20T16:52:33Z

dom.bs

+
+  <ol>
+   <li><p>If <var>options</var>["{{ElementCreationOptions/customElementRegistry}}"]
+   <a for=map>exists</a>, then set <var>registry</var> to it.


I haven't seen this short and sweet "set x to it" style before, but I like it!

foolip · 2025-03-20T16:53:11Z

dom.bs

+   <var>is</var> to it.
+  </ol>
+
+ <li><p>If <var>registry</var> is non-null and <var>is</var> is non-null, then <a>throw</a> a


Move this inside the if statement since it's impossible otherwise?

foolip · 2025-03-20T16:58:55Z

dom.bs

  <var>node</var>'s <a for=tree>descendants</a>.

+  <p>If <var>options</var>'s {{ImportNodeOptions/customElementRegistry}} can be used to set the


The leading "If" seems like copypasta. This isn't great either but some change is needed:

Suggested change

If <var>options</var>'s {{ImportNodeOptions/customElementRegistry}} can be used to set the

<var>options</var>'s {{ImportNodeOptions/customElementRegistry}} can be used to set the

foolip · 2025-03-20T17:00:50Z

dom.bs

@@ -6094,12 +6232,26 @@ 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 for=ShadowRoot>custom element registry</dfn>


Say that it is initially null?

foolip

Editorial review done.

foolip · 2025-03-20T22:09:03Z

dom.bs

@@ -6499,6 +6678,26 @@ null), and boolean <var>synchronousCustomElements</var> (default false):
 <li><p>Return <var>result</var>.
 </ol>

+<p>To <dfn>create an element internal</dfn> given a <a for=/>document</a> <var>document</var>, an


I actually am not sure what effect the noexport attribute has, but it's used elsewhere in DOM for spec-internal stuff, so:

Suggested change

To <dfn>create an element internal</dfn> given a <a for=/>document</a> <var>document</var>, an

To <dfn noexport>create an element internal</dfn> given a <a for=/>document</a> <var>document</var>, an

Also, I first thought this might be related to ElementInternals, so a name like "internal create element steps" or "inner create element steps" would help avoid that. Not a big deal though.

foolip · 2025-03-20T22:13:26Z

dom.bs

-
-     <li><p>Assert: <var>result</var>'s <a for=Element>custom element state</a> and
-     <a for=Element>custom element definition</a> are initialized.
+     <li><p><a for=map>Set</a> the <a>surrounding agent</a>'s


It's very hard to follow the diff here inside "create an element", so for any other reviews, I think the main things are:

Refactoring to use a "creating an element internal" helper, which takes the registry as an argument.

A bunch of steps nested one more level under "Run these steps while catching any exceptions", ending with the added "Set result’s custom element registry to registry."

Basically searching for "registry" within the steps shows the interesting stuff.

And I can't find anything wrong :)

foolip · 2025-03-20T22:15:25Z

dom.bs

-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 {{CustomElementRegistry}} object <var>registry</var>:


If you like this style, here it is again:

Suggested change

<var>slotAssignment</var>, and null or a {{CustomElementRegistry}} object <var>registry</var>:

<var>slotAssignment</var>, and a {{CustomElementRegistry}}-or-null <var>registry</var>:

annevk added a commit to whatwg/html that referenced this pull request Dec 17, 2024

Add Scoped Custom Element Registries

9aecb05

Do not comment directly on this PR while it is in draft state. Use #10854 instead. DOM PR: whatwg/dom#1341. Tests: ...

This was referenced Dec 17, 2024

Add Scoped Custom Element Registries whatwg/html#10869

Open

Revamped Scoped Custom Element Registries whatwg/html#10854

Open

annevk marked this pull request as ready for review December 19, 2024 09:51

annevk added topic: custom elements Relates to custom elements (as defined in DOM and HTML) addition/proposal New features or enhancements topic: shadow Relates to shadow trees (as defined in DOM) topic: nodes labels Dec 19, 2024

annevk force-pushed the annevk/scoped-custom-element-registries branch from 66f3a02 to dacf095 Compare December 19, 2024 10:05

annevk added a commit to whatwg/html that referenced this pull request Dec 19, 2024

Add Scoped Custom Element Registries

3ad2431

DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.

annevk added 2 commits February 21, 2025 10:40

Add Scoped Custom Element Registries

9137b50

HTML PR: whatwg/html#10869. Tests: ... Closes #1339.

Fix createElement and importNode

7e04bae

annevk force-pushed the annevk/scoped-custom-element-registries branch from dacf095 to 7e04bae Compare February 21, 2025 09:40

annevk added a commit to whatwg/html that referenced this pull request Feb 21, 2025

Add Scoped Custom Element Registries

2a6fa8f

DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.

annevk added 2 commits February 21, 2025 10:44

CI

f441601

CI again

71537d2

annevk mentioned this pull request Feb 21, 2025

Scoped Custom Element Registries mdn/content#38266

Open

annevk added a commit to web-platform-tests/wpt that referenced this pull request Feb 21, 2025

DOM: rename importNode()'s deep to selfOnly (and invert its value)

666cc13

Part of whatwg/dom#1341.

annevk mentioned this pull request Feb 21, 2025

DOM: rename importNode()'s deep to selfOnly (and invert its value) web-platform-tests/wpt#50860

Merged

annevk added a commit to web-platform-tests/wpt that referenced this pull request Feb 22, 2025

DOM: rename importNode()'s deep to selfOnly (and invert its value)

5bcf44c

Part of whatwg/dom#1341.

rniwa mentioned this pull request Feb 25, 2025

Sessions for March 26th W3C Breakout Day 2025 WICG/webcomponents#1095

Open

annevk added a commit to web-platform-tests/wpt that referenced this pull request Feb 25, 2025

DOM: createElement and createElementNS with scoped registries

197e5ea

For whatwg/dom#1341.

annevk mentioned this pull request Feb 25, 2025

DOM: createElement and createElementNS with scoped registries web-platform-tests/wpt#50925

Merged

annevk added a commit to web-platform-tests/wpt that referenced this pull request Feb 25, 2025

DOM: createElement and createElementNS with scoped registries

a52f979

For whatwg/dom#1341.

Do not make registries cross the shadow boundary

2038a33

annevk linked an issue Feb 26, 2025 that may be closed by this pull request

Revamped Scoped Custom Element Registries (DOM side) #1339

Open

Nice one CI

2b06524

annevk linked an issue Feb 26, 2025 that may be closed by this pull request

Revamped Scoped Custom Element Registries whatwg/html#10854

Open

4 tasks

Account for polyfill nonsense

da94abc

annevk mentioned this pull request Mar 3, 2025

Web Compatibility of Scoped Custom Element Registries whatwg/html#11076

Open

annevk added a commit to whatwg/html that referenced this pull request Mar 6, 2025

Add Scoped Custom Element Registries

ef055d7

DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.

Polyfill rename, expose document.customElementRegistry

5a1943c

rniwa mentioned this pull request Mar 17, 2025

Scoped custom element registry w3c/breakouts-day-2025#18

Open

keithamus mentioned this pull request Mar 18, 2025

Scoped Custom Element Registries w3ctag/design-reviews#1070

Open

1 task

justinfagnani reviewed Mar 18, 2025

View reviewed changes

foolip reviewed Mar 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Scoped Custom Element Registries #1341

Add Scoped Custom Element Registries #1341

annevk commented Dec 17, 2024 •

edited by pr-preview bot

Loading

justinfagnani Mar 18, 2025

annevk Mar 19, 2025

justinfagnani Mar 18, 2025

annevk Mar 19, 2025

foolip left a comment

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip left a comment

foolip Mar 20, 2025

foolip Mar 20, 2025

foolip Mar 20, 2025

		<li><p>If <li><var>inclusiveDescendant</var>'s <a for=ShadowRoot>custom element registry</a>
		is null and <li><var>inclusiveDescendant</var>'s

		<dfn export for="clone a node"><var>parent</var></dfn> (default null), and null or a
		{{CustomElementRegistry}} object <dfn export for="clone a node"><var>fallbackRegistry</var></dfn>

	<li><li>Let <var>is</var> be null.
	<li><p>Let <var>is</var> be null.

		<var>node</var>'s <a for=tree>descendants</a>.

		<p>If <var>options</var>'s {{ImportNodeOptions/customElementRegistry}} can be used to set the

	<p>If <var>options</var>'s {{ImportNodeOptions/customElementRegistry}} can be used to set the
	<p><var>options</var>'s {{ImportNodeOptions/customElementRegistry}} can be used to set the

	<p>To <dfn>create an element internal</dfn> given a <a for=/>document</a> <var>document</var>, an
	<p>To <dfn noexport>create an element internal</dfn> given a <a for=/>document</a> <var>document</var>, an

	<var>slotAssignment</var>, and null or a {{CustomElementRegistry}} object <var>registry</var>:
	<var>slotAssignment</var>, and a {{CustomElementRegistry}}-or-null <var>registry</var>:

Add Scoped Custom Element Registries #1341

Are you sure you want to change the base?

Add Scoped Custom Element Registries #1341

Conversation

annevk commented Dec 17, 2024 • edited by pr-preview bot Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

foolip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

foolip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk commented Dec 17, 2024 •

edited by pr-preview bot

Loading