Add Scoped Custom Element Registries #10869

annevk · 2024-12-17T17:33:19Z

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

DOM PR: whatwg/dom#1341.

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
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/399124619
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1874414
- WebKit: N/A
Corresponding HTML AAM & ARIA in HTML issues & PRs: 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.)

/custom-elements.html ( diff )
/dom.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/parsing.html ( diff )
/scripting.html ( diff )

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

source

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

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

…itialize Also refactor initialize and pass registry to create an element.

foolip

Editorial review pass up to the CustomElementRegistry IDL block.

foolip · 2025-03-19T15:34:25Z

source

@@ -3181,7 +3181,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <li><dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-document">node document</dfn> concept</li>
     <li><dfn data-x="concept-document-type" data-x-href="https://dom.spec.whatwg.org/#concept-document-type">document type</dfn> concept</li>
     <li><dfn data-x="concept-DocumentFragment-host" data-x-href="https://dom.spec.whatwg.org/#concept-documentfragment-host">host</dfn> concept</li>
-     <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-root">shadow root</dfn> concept, and its <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-delegates-focus">delegates focus</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-available-to-element-internals">available to element internals</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-clonable">clonable</dfn>, and <dfn data-x="shadow-serializable" data-x-href="https://dom.spec.whatwg.org/#shadowroot-serializable">serializable</dfn>.</li>
+     <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-root">shadow root</dfn> concept, and its <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-delegates-focus">delegates focus</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-available-to-element-internals">available to element internals</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#shadowroot-clonable">clonable</dfn>, <dfn data-x="shadow-serializable" data-x-href="https://dom.spec.whatwg.org/#shadowroot-serializable">serializable</dfn>, <dfn data-x="shadow-root-custom-element-registry" data-x-href="https://whatpr.org/dom/1341.html#shadowroot-custom-element-registry">custom element registry</dfn>, and <dfn data-x-href="https://whatpr.org/dom/1341.html#shadowroot-keep-custom-element-registry-null">keep custom element registry null</dfn>.</li>


Comment to ensure that the URLs here change before this is merged.

foolip · 2025-03-19T15:35:14Z

source

-                       <dfn data-x="concept-node-clone-parent" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-parent"><var>parent</var></dfn>, and the concept of
+                       <dfn data-x="concept-node-clone-subtree" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-subtree"><var>subtree</var></dfn>,
+                       <dfn data-x="concept-node-clone-parent" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-parent"><var>parent</var></dfn>, and
+                       <dfn data-x="concept-node-clone-fallbackRegistry" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-fallbackregistry"><var>fallbackRegistry</var></dfn>, and the concept of


Need to double check that this URL is correct before landing.

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

source

+     <span>active custom element constructor map</span>[<span>NewTarget</span>].</p></li>
+    </ol>
+
+   <li><p>If <var>registry</var> is null, then set <var>registry</var> to <span>current global


Is this equivalent?

Suggested change

<li>If <var>registry</var> is null, then set <var>registry</var> to current global

<li>Otherwise, set <var>registry</var> to current global

I think it is, because it seems registry can't still be null if the previous branch was taken. The way it's currently written makes me as a reader question that assumption :)

foolip · 2025-03-19T15:56:37Z

source

@@ -64717,6 +64738,10 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
  data-x="attr-template-shadowrootserializable">shadowrootserializable</code></dfn> content
  attribute is a <span>boolean attribute</span>.</p>

+  <p>The <dfn element-attr for="template"><code
+  data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code></dfn>


It looks like this the longest attribute name so far, 31 characters. Maybe that's right, but have you thought about shorter names that you also think are OK?

foolip · 2025-03-19T16:00:52Z

source

+  data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code>
+  content attribute.</p>
+
+  <p class="note">The IDL attribute does intentionally not have a boolean type so it can be


Interesting, what's the possible extension point here? To give a name to registries or something?

foolip · 2025-03-19T16:04:01Z

source

+  <p>To <dfn export>look up a custom element definition</dfn>, given null or a
+  <code>CustomElementRegistry</code> object <var>registry</var>, string-or-null


This style seems more common for nullable objects:

Suggested change

To <dfn export>look up a custom element definition</dfn>, given null or a

<code>CustomElementRegistry</code> object <var>registry</var>, string-or-null

To <dfn export>look up a custom element definition</dfn>, given a

<code>CustomElementRegistry</code>-or-null <var>registry</var>, string-or-null

(I found NavigationFocusReset-or-null as the example follow.)

foolip

Editorial review done.

foolip · 2025-03-19T19:20:07Z

source

-  DOMString? <span data-x="dom-CustomElementRegistry-getName">getName</span>(CustomElementConstructor constructor);
-  <span data-x="idl-Promise">Promise</span>&lt;<span>CustomElementConstructor</span>&gt; <span data-x="dom-CustomElementRegistry-whenDefined">whenDefined</span>(DOMString name);
-  [<span>CEReactions</span>] undefined <span data-x="dom-CustomElementRegistry-upgrade">upgrade</span>(<span>Node</span> root);
+  <span data-x="dom-CustomElementRegistry">constructor</span>();


For other reviewers: It's hard to tell from the diff, so the new things here are the constructor and the initialize() method.

foolip · 2025-03-19T19:24:24Z

source

+
+  <ol>
+   <li><p>If <var>node</var> is an <code>Element</code> object, then return
+   <var>parentNode</var>'s <span data-x="element-custom-element-registry">custom element


There is no parentNode argument. Judging by the DOM PR, this should just be the element's custom element registry?

Suggested change

<var>parentNode</var>'s custom element

<var>node</var>'s custom element

foolip · 2025-03-19T19:26:53Z

source

+   <li><p>If <var>node</var> is a <code>ShadowRoot</code> object, then return <var>node</var>'s
+   <span data-x="shadow-root-custom-element-registry">custom element registry</span>.
+
+   <li><p>If <var>node</var>'s <span data-x="concept-document-bc">browsing context</span> is null,


Can this check the relevant global object instead, so that a reader doesn't need to think about whether a node's browsing context and relevant global object are always null/non-null at the same time. Also, implementations will probably just get the relevant global object and check if it's null, so just as well to be close to that.

foolip · 2025-03-19T19:30:03Z

source

   <dd><span data-x="concept-try-upgrade">Tries to upgrade</span> all <span>shadow-including
   inclusive descendant</span> elements of <var>root</var>, even if they are not
   <span>connected</span>.</dd>
+
+   <dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-initialize">initialize</span>(<var>root</var>)</code></dt>
+   <dd>Each <span>inclusive descendant</span> of <var>root</var> with a null registry will have it


The "with a null registry" is accurate, but see question below and let's make sure this matches if anything changes.

foolip · 2025-03-19T19:36:34Z

source

+
+  <ol>
+   <li><p>If <var>root</var> is a <code>ShadowRoot</code> node whose <span
+   data-x="shadow-root-custom-element-registry">custom element registry</span> is null, then set


Is the "is null" condition here and below important? Is there an invariant that a node's custom element registry never changes after it's set to a non-null value, and why? A note or example about this might help.

If that's not an invariant and if there's a use case for changing the custom element registry, then maybe an option for how to handle non-null cases is needed?

(Apologies if this is not a good question, I'm reviewing this before really understanding how everything fits together.)

foolip · 2025-03-19T19:39:59Z

source

+      <p><span data-x="map remove">Remove</span> <var>registry</var>'s <span>relevant global
+      object</span>'s <span>active custom element constructor map</span>[<var>C</var>].</p>
+
+      <p class="note">This is a no-op if <var>C</var> immediately calls <code


Is the case where super() isn't called covered by the tests?

foolip · 2025-03-19T19:44:29Z

source

+       <li><p>If <var>current node</var>'s <span data-x="element-custom-element-registry">custom
+       element registry</span> is not <var>shadow</var>'s <span
+       data-x="shadow-root-custom-element-registry">custom element registry</span>, then append
+       "<code data-x=""> shadowrootcustomelementregistry=&quot;&quot;</code>".</p></li>


How does this fit together with the extension point, the reason that the IDL attribute reflects as a string and not a boolean? Shouldn't this preserve the attribute value for consistency / to avoid a change in behavior later?

foolip · 2025-03-19T19:48:17Z

OK, so the main thing I'm left wondering point is the reasoning behind shadowrootcustomelementregistry being a boolean attribute, but the shadowRootCustomElementRegistry IDL attribute reflecting as a string, per the comment in the spec.

If the value is the empty string, shadowRootCustomElementRegistry will be the empty string (falsy), but if it was reflected as a boolean it would be true. If the attribute isn't present, shadowRootCustomElementRegistry would also be the empty string, so how does one distinguish between the typical "attribute is present" and "attribute is absent" cases?

Maybe it makes sense if I learn more about how this might be extended in the future.

annevk mentioned this pull request Dec 17, 2024

Revamped Scoped Custom Element Registries #10854

Open

4 tasks

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

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

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

Add Scoped Custom Element Registries

dacf095

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

annevk force-pushed the annevk/scoped-custom-element-registries branch from ff4688a to 3ad2431 Compare December 19, 2024 10:07

This was referenced Jan 9, 2025

Upcoming WHATNOT meeting on 2025-01-09 #10878

Closed

Upcoming WHATNOT meeting on 2025-01-16 #10906

Closed

annevk commented Jan 31, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

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

Add Scoped Custom Element Registries

9137b50

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

annevk force-pushed the annevk/scoped-custom-element-registries branch from 3ad2431 to 28bf12c Compare February 21, 2025 09:42

This was referenced Feb 21, 2025

Scoped Custom Element Registries mdn/content#38266

Open

Add Scoped Custom Element Registries whatwg/dom#1341

Open

This was linked to issues Feb 26, 2025

Revamped Scoped Custom Element Registries #10854

Open

Revamped Scoped Custom Element Registries (DOM side) whatwg/dom#1339

Open

annevk added 4 commits March 6, 2025 12:31

Add Scoped Custom Element Registries

ef055d7

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

Remove createElement and cloneSubtree, rename initializeSubtree to in…

0c9a957

…itialize Also refactor initialize and pass registry to create an element.

Make sure initialize() updates the scoped document set

d1461d7

Polyfill rename

98b171e

annevk force-pushed the annevk/scoped-custom-element-registries branch from f02797a to 98b171e Compare March 6, 2025 11:36

Rename argument to look up a custom element registry

8ef7c76

keithamus mentioned this pull request Mar 18, 2025

Scoped Custom Element Registries w3ctag/design-reviews#1070

Open

1 task

foolip reviewed Mar 19, 2025

View reviewed changes

annevk mentioned this pull request Mar 19, 2025

Scoped Custom Element Registries WebKit/standards-positions#38

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Scoped Custom Element Registries #10869

Add Scoped Custom Element Registries #10869

annevk commented Dec 17, 2024 •

edited by pr-preview bot

Loading

foolip left a comment

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip left a comment

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip Mar 19, 2025

foolip commented Mar 19, 2025

	<li><p>If <var>registry</var> is null, then set <var>registry</var> to <span>current global
	<li><p>Otherwise, set <var>registry</var> to <span>current global

		<p>To <dfn export>look up a custom element definition</dfn>, given null or a
		<code>CustomElementRegistry</code> object <var>registry</var>, string-or-null

	<var>parentNode</var>'s <span data-x="element-custom-element-registry">custom element
	<var>node</var>'s <span data-x="element-custom-element-registry">custom element

Add Scoped Custom Element Registries #10869

Are you sure you want to change the base?

Add Scoped Custom Element Registries #10869

Conversation

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

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

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

foolip commented Mar 19, 2025

annevk commented Dec 17, 2024 •

edited by pr-preview bot

Loading