Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 2a6fa8f

Browse files
annevkannevk
committedFeb 21, 2025
Add Scoped Custom Element Registries
DOM PR: whatwg/dom#1341. Tests: ... Closes #10854.
1 parent 6a3787f commit 2a6fa8f

File tree

1 file changed

+261
-70
lines changed

1 file changed

+261
-70
lines changed
 

‎source

+261-70
Original file line numberDiff line numberDiff line change
@@ -3203,7 +3203,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
32033203
<li><dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-document">node document</dfn> concept</li>
32043204
<li><dfn data-x="concept-document-type" data-x-href="https://dom.spec.whatwg.org/#concept-document-type">document type</dfn> concept</li>
32053205
<li><dfn data-x="concept-DocumentFragment-host" data-x-href="https://dom.spec.whatwg.org/#concept-documentfragment-host">host</dfn> concept</li>
3206-
<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>
3206+
<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>
3207+
<!-- XXX xref -->
32073208
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#element-shadow-host">shadow host</dfn> concept</li>
32083209
<li><dfn data-x-href="https://dom.spec.whatwg.org/#interface-htmlcollection"><code>HTMLCollection</code></dfn> interface, its
32093210
<dfn data-x="dom-HTMLCollection-length" data-x-href="https://dom.spec.whatwg.org/#dom-htmlcollection-length"><code>length</code></dfn> attribute, and its
@@ -3319,8 +3320,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
33193320
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-document-no-quirks">no-quirks mode</dfn></li>
33203321
<li>The algorithm <dfn data-x="concept-node-clone" data-x-href="https://dom.spec.whatwg.org/#concept-node-clone">clone a node</dfn> with its arguments
33213322
<dfn data-x="concept-node-clone-document" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-document"><var>document</var></dfn>,
3322-
<dfn data-x="concept-node-clone-subtree" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-subtree"><var>subtree</var></dfn>, and
3323-
<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
3323+
<dfn data-x="concept-node-clone-subtree" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-subtree"><var>subtree</var></dfn>,
3324+
<dfn data-x="concept-node-clone-parent" data-x-href="https://dom.spec.whatwg.org/#clone-a-node-parent"><var>parent</var></dfn>, and
3325+
<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
33243326
<dfn data-x="concept-node-clone-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-clone-ext">cloning steps</dfn></li>
33253327
<li>The concept of <dfn>base URL change steps</dfn> and the definition of what happens when an element is <dfn>affected by a base URL change</dfn></li>
33263328
<li>The concept of an element's <dfn data-x="concept-id" data-x-href="https://dom.spec.whatwg.org/#concept-id">unique identifier (ID)</dfn></li>
@@ -3341,6 +3343,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
33413343
<li>An element's <dfn data-x="concept-element-namespace" data-x-href="https://dom.spec.whatwg.org/#concept-element-namespace">namespace</dfn>,
33423344
<dfn data-x="concept-element-namespace-prefix" data-x-href="https://dom.spec.whatwg.org/#concept-element-namespace-prefix">namespace prefix</dfn>,
33433345
<dfn data-x="concept-element-local-name" data-x-href="https://dom.spec.whatwg.org/#concept-element-local-name">local name</dfn>,
3346+
<dfn data-x="element-custom-element-registry" data-x-href="https://whatpr.org/dom/1341.html#concept-element-custom-element-registry">custom element registry</dfn>,
3347+
<!-- XXX xref -->
33443348
<dfn data-x="concept-element-custom-element-definition" data-x-href="https://dom.spec.whatwg.org/#concept-element-custom-element-definition">custom element definition</dfn>, and
33453349
<dfn data-x="concept-element-is-value" data-x-href="https://dom.spec.whatwg.org/#concept-element-is-value"><code data-x="">is</code> value</dfn></li>
33463350

@@ -12050,9 +12054,6 @@ console.assert(el.constructor === Element);</code></pre>
1205012054
<span>overridden constructor steps</span>:</p>
1205112055

1205212056
<ol>
12053-
<li><p>Let <var>registry</var> be <span>current global object</span>'s <span
12054-
data-x="global-custom-element-registry">custom element registry</span>.</p></li>
12055-
1205612057
<li>
1205712058
<p>If <span>NewTarget</span> is equal to the <span>active function
1205812059
object</span>, then throw a <code>TypeError</code>.</p>
@@ -12073,6 +12074,24 @@ document.createElement("bad-1"); // (2)</code></pre>
1207312074
</div>
1207412075
</li>
1207512076

12077+
<li><p>Let <var>registry</var> be null.</p></li>
12078+
12079+
<li>
12080+
<p>If the <span>surrounding agent</span>'s <span>active custom element constructor
12081+
map</span>[<span>NewTarget</span>] <span data-x="map exists">exists</span>:</p>
12082+
12083+
<ol>
12084+
<li><p>Set <var>registry</var> to the <span>surrounding agent</span>'s <span>active custom
12085+
element constructor map</span>[<span>NewTarget</span>].</p></li>
12086+
12087+
<li><p><span data-x="map remove">Remove</span> the <span>surrounding agent</span>'s
12088+
<span>active custom element constructor map</span>[<span>NewTarget</span>].</p></li>
12089+
</ol>
12090+
12091+
<li><p>If <var>registry</var> is null, then set <var>registry</var> to <span>current global
12092+
object</span>'s <span data-x="global-custom-element-registry">custom element
12093+
registry</span>.</p></li>
12094+
1207612095
<li>
1207712096
<p>Let <var>definition</var> be the item in <var>registry</var>'s <span>custom element
1207812097
definition set</span> with <span
@@ -64660,6 +64679,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
6466064679
<dd><code data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code></dd>
6466164680
<dd><code data-x="attr-template-shadowrootclonable">shadowrootclonable</code></dd>
6466264681
<dd><code data-x="attr-template-shadowrootserializable">shadowrootserializable</code></dd>
64682+
<dd><code data-x="attr-template-shadowrootcustomelements">shadowrootcustomelements</code></dd>
6466364683
<dt><span
6466464684
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
6466564685
<dd><a href="https://w3c.github.io/html-aria/#el-template">For authors</a>.</dd>
@@ -64675,6 +64695,7 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
6467564695
[<span>CEReactions</span>] attribute boolean <span data-x="dom-template-shadowrootdelegatesfocus">shadowRootDelegatesFocus</span>;
6467664696
[<span>CEReactions</span>] attribute boolean <span data-x="dom-template-shadowrootclonable">shadowRootClonable</span>;
6467764697
[<span>CEReactions</span>] attribute boolean <span data-x="dom-template-shadowRootSerializable">shadowRootSerializable</span>;
64698+
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-template-shadowRootCustomElements">shadowRootCustomElements</span>;
6467864699
};</code></pre>
6467964700
</dd>
6468064701
<dd w-dev>Uses <code>HTMLTemplateElement</code>.</dd>
@@ -64723,6 +64744,10 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
6472364744
data-x="attr-template-shadowrootserializable">shadowrootserializable</code></dfn> content
6472464745
attribute is a <span>boolean attribute</span>.</p>
6472564746

64747+
<p>The <dfn element-attr for="template"><code
64748+
data-x="attr-template-shadowrootcustomelements">shadowrootcustomelements</code></dfn>
64749+
content attribute is a <span>boolean attribute</span>.</p>
64750+
6472664751
<p>The <span>template contents</span> of a <code>template</code> element <a
6472764752
href="#template-syntax">are not children of the element itself</a>.</p>
6472864753

@@ -64875,6 +64900,15 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
6487564900
must <span>reflect</span> the <code
6487664901
data-x="attr-template-shadowrootserializable">shadowrootserializable</code> content attribute.</p>
6487764902

64903+
<p>The <dfn attribute for="HTMLTemplateElement"><code
64904+
data-x="dom-template-shadowRootCustomElements">shadowRootCustomElements</code></dfn> IDL attribute
64905+
must <span>reflect</span> the <code
64906+
data-x="attr-template-shadowrootcustomelements">shadowrootcustomelements</code> content
64907+
attribute.</p>
64908+
64909+
<p class="note">The IDL attribute does intentionally not have a boolean type so it can be
64910+
extended.</p>
64911+
6487864912
<hr>
6487964913

6488064914
<p>The <span data-x="concept-node-clone-ext">cloning steps</span> for <code>template</code>
@@ -73223,8 +73257,8 @@ document.body.append(parent);
7322373257

7322473258
<div w-nodev>
7322573259

73226-
<p>A <dfn>custom element definition</dfn> describes a <span>custom element</span> and consists
73227-
of:</p>
73260+
<p>A <dfn export>custom element definition</dfn> describes a <span>custom element</span> and
73261+
consists of:</p>
7322873262

7322973263
<dl>
7323073264
<dt>A <dfn data-x="concept-custom-element-definition-name" export
@@ -73278,18 +73312,15 @@ document.body.append(parent);
7327873312
<dd>Controls <code data-x="dom-Element-attachShadow">attachShadow()</code>.
7327973313
</dl>
7328073314

73281-
<p>To <dfn export>look up a custom element definition</dfn>, given a <var>document</var>,
73282-
<var>namespace</var>, <var>localName</var>, and <var>is</var>, perform the following steps. They
73283-
will return either a <span>custom element definition</span> or null:</p>
73315+
<p>To <dfn export>look up a custom element definition</dfn>, given null or a
73316+
<code>CustomElementRegistry</code> object <var>registry</var>, string-or-null
73317+
<var>namespace</var>, string <var>localName</var>, and string-or-null <var>is</var>, perform the
73318+
following steps. They will return either a <span>custom element definition</span> or null:</p>
7328473319

7328573320
<ol>
73286-
<li><p>If <var>namespace</var> is not the <span>HTML namespace</span>, then return null.</p></li>
73287-
73288-
<li><p>If <var>document</var>'s <span data-x="concept-document-bc">browsing context</span> is
73289-
null, then return null.</p></li>
73321+
<li><p>If <var>registry</var> is null, then return null.</p></li>
7329073322

73291-
<li><p>Let <var>registry</var> be <var>document</var>'s <span>relevant global object</span>'s
73292-
<span data-x="global-custom-element-registry">custom element registry</span>.</p></li>
73323+
<li><p>If <var>namespace</var> is not the <span>HTML namespace</span>, then return null.</p></li>
7329373324

7329473325
<li><p>If <var>registry</var>'s <span>custom element definition set</span> <span data-x="list
7329573326
contains">contains</span> an item with <span
@@ -73322,18 +73353,28 @@ document.body.append(parent);
7332273353

7332373354
<div w-nodev>
7332473355

73356+
<p>Each <span>similar-origin window agent</span> has an associated <dfn export for="similar-origin
73357+
window agent">active custom element constructor map</dfn>, which is a <span data-x="ordered
73358+
map">map</span> of constructors to <code>CustomElementRegistry</code> objects.</p>
73359+
7332573360
<p>The <dfn attribute for="Window"><code
7332673361
data-x="dom-window-customElements">customElements</code></dfn> attribute of the
7332773362
<code>Window</code> interface must return the <code>CustomElementRegistry</code> object for that
7332873363
<code>Window</code> object.</p>
7332973364

7333073365
<pre><code class="idl">[Exposed=Window]
7333173366
interface <dfn interface>CustomElementRegistry</dfn> {
73332-
[<span>CEReactions</span>] undefined <span data-x="dom-CustomElementRegistry-define">define</span>(DOMString name, <span>CustomElementConstructor</span> constructor, optional <span>ElementDefinitionOptions</span> options = {});
73333-
(<span>CustomElementConstructor</span> or undefined) <span data-x="dom-CustomElementRegistry-get">get</span>(DOMString name);
73334-
DOMString? <span data-x="dom-CustomElementRegistry-getName">getName</span>(CustomElementConstructor constructor);
73335-
<span data-x="idl-Promise">Promise</span>&lt;<span>CustomElementConstructor</span>&gt; <span data-x="dom-CustomElementRegistry-whenDefined">whenDefined</span>(DOMString name);
73336-
[<span>CEReactions</span>] undefined <span data-x="dom-CustomElementRegistry-upgrade">upgrade</span>(<span>Node</span> root);
73367+
<span data-x="dom-CustomElementRegistry">constructor</span>();
73368+
73369+
[<span>CEReactions</span>] undefined <span data-x="dom-CustomElementRegistry-define">define</span>(DOMString <var>name</var>, <span>CustomElementConstructor</span> <var>constructor</var>, optional <span>ElementDefinitionOptions</span> <var>options</var> = {});
73370+
(<span>CustomElementConstructor</span> or undefined) <span data-x="dom-CustomElementRegistry-get">get</span>(DOMString <var>name</var>);
73371+
DOMString? <span data-x="dom-CustomElementRegistry-getName">getName</span>(CustomElementConstructor <var>constructor</var>);
73372+
<span data-x="idl-Promise">Promise</span>&lt;<span>CustomElementConstructor</span>&gt; <span data-x="dom-CustomElementRegistry-whenDefined">whenDefined</span>(DOMString <var>name</var>);
73373+
[<span>CEReactions</span>] undefined <span data-x="dom-CustomElementRegistry-upgrade">upgrade</span>(<span>Node</span> <var>root</var>);
73374+
73375+
[<span>CEReactions</span>, NewObject] <span>HTMLElement</span> <span data-x="dom-CustomElementRegistry-createElement">createElement</span>(DOMString <var>name</var>);
73376+
[<span>CEReactions</span>, NewObject] <span>Node</span> <span data-x="dom-CustomElementRegistry-cloneSubtree">cloneSubtree</span>(<span>Node</span> <var>root</var>);
73377+
undefined <span data-x="dom-CustomElementRegistry-initializeSubtree">initializeSubtree</span>((<span>Element</span> or <span>ShadowRoot</span>) <var>root</var>);
7333773378
};
7333873379

7333973380
callback <dfn callback>CustomElementConstructor</dfn> = <span>HTMLElement</span> ();
@@ -73342,6 +73383,12 @@ dictionary <dfn dictionary>ElementDefinitionOptions</dfn> {
7334273383
DOMString <dfn dict-member for="ElementDefinitionOptions" data-x="dom-ElementDefinitionOptions-extends">extends</dfn>;
7334373384
};</code></pre>
7334473385

73386+
<p>Every <code>CustomElementRegistry</code> has an <dfn export for="CustomElementRegistry">is
73387+
scoped</dfn>, a boolean, initially false.</p>
73388+
73389+
<p>Every <code>CustomElementRegistry</code> has a <dfn export for="CustomElementRegistry">scoped
73390+
document set</dfn>, a <span>set</span> of <code>Document</code> objects, initially « ».</p>
73391+
7334573392
<p>Every <code>CustomElementRegistry</code> has a <dfn>custom element definition set</dfn>, a
7334673393
<span>set</span> of <span data-x="custom element definition">custom element definitions</span>,
7334773394
initially « ». Lookup of items in this <span>set</span> uses their <span
@@ -73358,50 +73405,90 @@ dictionary <dfn dictionary>ElementDefinitionOptions</dfn> {
7335873405
element names</span> to promises. It is used to implement the <code
7335973406
data-x="dom-CustomElementRegistry-whenDefined">whenDefined()</code> method.</p>
7336073407

73408+
<p>To <dfn export>look up a custom element registry</dfn>, given an <code>Element</code> object,
73409+
<code>ShadowRoot</code> object, or <code>Document</code> object <var>parentNode</var>:
73410+
73411+
<ol>
73412+
<li><p>If <var>parentNode</var> is an <code>Element</code> object, then return
73413+
<var>parentNode</var>'s <span data-x="element-custom-element-registry">custom element
73414+
registry</span>.
73415+
73416+
<li><p>If <var>parentNode</var> is a <code>ShadowRoot</code> object, then return
73417+
<var>parentNode</var>'s <span data-x="shadow-root-custom-element-registry">custom element
73418+
registry</span>.
73419+
73420+
<li><p>If <var>parentNode</var>'s <span data-x="concept-document-bc">browsing context</span> is
73421+
null, then return null.</p></li>
73422+
73423+
<li><p>Return <var>parentNode</var>'s <span>relevant global object</span>'s <span
73424+
data-x="global-custom-element-registry">custom element registry</span>.</p></li>
73425+
</ol>
73426+
7336173427
</div>
7336273428

7336373429
<dl class="domintro">
73364-
<dt><code data-x=""><var>window</var>.<span data-x="dom-window-customElements">customElements</span>.<span subdfn data-x="dom-CustomElementRegistry-define">define</span>(<var>name</var>,
73365-
<var>constructor</var>)</code></dt>
73430+
<dt><code data-x=""><var>registry</var> = <var>window</var>.<span subdfn data-x="dom-window-customElements">customElements</span></code></dt>
73431+
<dd>Returns the global <code>CustomElementRegistry</code> object.</dd>
73432+
73433+
<dt><code data-x=""><var>registry</var> = new <span subdfn data-x="dom-CustomElementRegistry">CustomElementRegistry</span>()</code></dt>
73434+
<dd>Constructs a new <code>CustomElementRegistry</code> object, for scoped usage.</dd>
7336673435

73436+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-define">define</span>(<var>name</var>,
73437+
<var>constructor</var>)</code></dt>
7336773438
<dd>Defines a new <span>custom element</span>, mapping the given name to the given constructor
7336873439
as an <span>autonomous custom element</span>.</dd>
7336973440

73370-
73371-
<dt><code data-x=""><var>window</var>.<span data-x="dom-window-customElements">customElements</span>.<span data-x="dom-CustomElementRegistry-define">define</span>(<var>name</var>, <var>constructor</var>,
73441+
<dt><code data-x=""><var>registry</var>.<span data-x="dom-CustomElementRegistry-define">define</span>(<var>name</var>, <var>constructor</var>,
7337273442
{ extends: <var>baseLocalName</var> })</code></dt>
73373-
7337473443
<dd>Defines a new <span>custom element</span>, mapping the given name to the given constructor as
7337573444
a <span>customized built-in element</span> for the <span>element type</span> identified by the
7337673445
supplied <var>baseLocalName</var>. A <span>"<code>NotSupportedError</code>"</span>
7337773446
<code>DOMException</code> will be thrown upon trying to extend a <span>custom element</span> or
73378-
an unknown element.</dd>
73379-
73380-
<dt><code data-x=""><var>window</var>.<span data-x="dom-window-customElements">customElements</span>.<span subdfn data-x="dom-CustomElementRegistry-get">get</span>(<var>name</var>)</code></dt>
73447+
an unknown element, or when <var>registry</var> is not a global
73448+
<code>CustomElementRegistry</code> object.</dd>
7338173449

73450+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-get">get</span>(<var>name</var>)</code></dt>
7338273451
<dd>Retrieves the <span>custom element constructor</span> defined for the given <span data-x="concept-custom-element-definition-name">name</span>. Returns undefined if there is no
7338373452
<span>custom element definition</span> with the given <span data-x="concept-custom-element-definition-name">name</span>.</dd>
7338473453

73385-
<dt><code data-x=""><var>window</var>.<span data-x="dom-window-customElements">customElements</span>.<span subdfn data-x="dom-CustomElementRegistry-getName">getName</span>(<var>constructor</var>)</code></dt>
73386-
73454+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-getName">getName</span>(<var>constructor</var>)</code></dt>
7338773455
<dd>Retrieves the given name for a <span>custom element</span> defined for the given <span data-x="concept-custom-element-definition-constructor">constructor</span>. Returns null if there is no
7338873456
<span>custom element definition</span> with the given <span data-x="concept-custom-element-definition-constructor">constructor</span>.</dd>
7338973457

73390-
<dt><code data-x=""><var>window</var>.<span data-x="dom-window-customElements">customElements</span>.<span subdfn data-x="dom-CustomElementRegistry-whenDefined">whenDefined</span>(<var>name</var>)</code></dt>
73391-
73458+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-whenDefined">whenDefined</span>(<var>name</var>)</code></dt>
7339273459
<dd>Returns a promise that will be fulfilled with the <span>custom element</span>'s constructor
7339373460
when a <span>custom element</span> becomes defined with the given name. (If such a <span>custom
7339473461
element</span> is already defined, the returned promise will be immediately fulfilled.) Returns a
7339573462
promise rejected with a <span>"<code>SyntaxError</code>"</span> <code>DOMException</code> if not
7339673463
given a <span>valid custom element name</span>.</dd>
7339773464

73398-
<dt><code data-x=""><var>window</var>.<span data-x="dom-window-customElements">customElements</span>.<span subdfn data-x="dom-CustomElementRegistry-upgrade">upgrade</span>(<var>root</var>)</code></dt>
73399-
73465+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-upgrade">upgrade</span>(<var>root</var>)</code></dt>
7340073466
<dd><span data-x="concept-try-upgrade">Tries to upgrade</span> all <span>shadow-including
7340173467
inclusive descendant</span> elements of <var>root</var>, even if they are not
7340273468
<span>connected</span>.</dd>
73469+
73470+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-createElement">createElement</span>(<var>name</var>)</code></dt>
73471+
<dd>
73472+
<p>Returns an <span data-x="HTML elements">HTML element</span> with <var>name</var> as its local
73473+
name and <var>registry</var> as its registry.</p>
73474+
73475+
<p>If <var>name</var> does not match the <code data-x="xml-Name">Name</code> production an
73476+
<span>"<code>InvalidCharacterError</code>"</span> <code>DOMException</code> will be thrown.</p>
73477+
</dd>
73478+
73479+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-cloneSubtree">cloneSubtree</span>(<var>root</var>)</code></dt>
73480+
<dd>Returns a copy of <var>root</var>, changing the registry from <var>root</var>'s inclusive
73481+
descendants from null (if any) to <var>registry</var> in the process.</dd>
73482+
73483+
<dt><code data-x=""><var>registry</var>.<span subdfn data-x="dom-CustomElementRegistry-initializeSubtree">initializeSubtree</span>(<var>root</var>)</code></dt>
73484+
<dd>Each <span>inclusive descendant</span> of <var>root</var> with a null registry will have it
73485+
updated to this <code>CustomElementRegistry</code> object.</dd>
7340373486
</dl>
7340473487

73488+
<p w-nodev>The <dfn
73489+
data-x="dom-CustomElementRegistry"><code>new CustomElementRegistry()</code></dfn> constructor
73490+
steps are to set <span>this</span>'s <span>is scoped</span> to true.</p>
73491+
7340573492
<p><dfn>Element definition</dfn> is a process of adding a <span>custom element definition</span>
7340673493
to the <code>CustomElementRegistry</code>. This is accomplished by the <code
7340773494
data-x="dom-CustomElementRegistry-define">define()</code> method. <span w-nodev>The <dfn method
@@ -73438,6 +73525,10 @@ dictionary <dfn dictionary>ElementDefinitionOptions</dfn> {
7343873525
<p>If <var>extends</var> is not null:</p>
7343973526

7344073527
<ol>
73528+
<li><p>If <span>this</span> is not <span>this</span>'s <span>relevant global object</span>'s
73529+
<span data-x="global-custom-element-registry">custom element registry</span>, then throw a
73530+
<span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>
73531+
7344173532
<li><p>If <var>extends</var> is a <span>valid custom element name</span>, then throw a
7344273533
<span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>
7344373534

@@ -73576,22 +73667,14 @@ dictionary <dfn dictionary>ElementDefinitionOptions</dfn> {
7357673667
<li><p><span data-x="set append">Append</span> <var>definition</var> to <span>this</span>'s
7357773668
<span>custom element definition set</span>.</p></li>
7357873669

73579-
<li><p>Let <var>document</var> be <span>this</span>'s <span>relevant global object</span>'s <span
73580-
data-x="concept-document-window">associated <code>Document</code></span>.</p></li>
73581-
73582-
<li><p>Let <var>upgradeCandidates</var> be all elements that are <span data-x="shadow-including
73583-
descendant">shadow-including descendants</span> of <var>document</var>, whose namespace
73584-
is the <span>HTML namespace</span> and whose local name is <var>localName</var>, in
73585-
<span>shadow-including tree order</span>. Additionally, if <var>extends</var> is non-null, only
73586-
include elements whose <span data-x="concept-element-is-value"><code data-x="">is</code>
73587-
value</span> is equal to <var>name</var>.</p></li>
73588-
73589-
<li><p>For each element <var>element</var> of <var>upgradeCandidates</var>, <span>enqueue a
73590-
custom element upgrade reaction</span> given <var>element</var> and
73591-
<var>definition</var>.</p></li>
73670+
<li><p>If <span>this</span>'s <span>is scoped</span> is true, then for each <var>document</var>
73671+
of <span>this</span>'s <span>scoped document set</span>: <span>upgrade particular elements within
73672+
a document</span> given <var>document</var> and <var>localName</var>.
7359273673

73593-
<!-- It is equivalent to just try to upgrade all elements in the document, and let "try to
73594-
upgrade" bail out, but this seems a bit more explicit. -->
73674+
<li><p>Otherwise, <span>upgrade particular elements within a document</span> given
73675+
<span>this</span>'s <span>relevant global object</span>'s <span
73676+
data-x="concept-document-window">associated <code>Document</code></span>, <var>localName</var>,
73677+
and <var>name</var>.</p></li>
7359573678

7359673679
<li>
7359773680
<p>If <span>this</span>'s <span>when-defined promise map</span>[<var>name</var>] <span data-x="map
@@ -73607,6 +73690,25 @@ dictionary <dfn dictionary>ElementDefinitionOptions</dfn> {
7360773690
</li>
7360873691
</ol>
7360973692

73693+
<p>To <dfn>upgrade particular elements within a document</dfn> given a <code>Document</code>
73694+
object <var>document</var>, a string <var>localName</var>, and optionally a string <var>name</var>
73695+
(default <var>localName</var>):
73696+
73697+
<ol>
73698+
<li><p>Let <var>upgradeCandidates</var> be all elements that are <span data-x="shadow-including
73699+
descendant">shadow-including descendants</span> of <var>document</var>, whose namespace
73700+
is the <span>HTML namespace</span> and whose local name is <var>localName</var>, in
73701+
<span>shadow-including tree order</span>. Additionally, if <var>name</var> is not
73702+
<var>localName</var>, only include elements whose <span data-x="concept-element-is-value"><code
73703+
data-x="">is</code> value</span> is equal to <var>name</var>.</p></li>
73704+
73705+
<li><p>For each element <var>element</var> of <var>upgradeCandidates</var>: <span>enqueue a
73706+
custom element upgrade reaction</span> given <var>element</var> and
73707+
<var>definition</var>.</p></li>
73708+
</ol>
73709+
<!-- It is equivalent to just try to upgrade all elements in the document, and let "try to
73710+
upgrade" bail out, but this seems a bit more explicit. -->
73711+
7361073712
<p>The <dfn method for="CustomElementRegistry"><code
7361173713
data-x="dom-CustomElementRegistry-get">get(<var>name</var>)</code></dfn> method steps are:</p>
7361273714

@@ -73686,9 +73788,9 @@ fetch(articleURL)
7368673788

7368773789
<div w-nodev>
7368873790

73689-
<p>When invoked, the <dfn method for="CustomElementRegistry"><code
73690-
data-x="dom-CustomElementRegistry-upgrade">upgrade(<var>root</var>)</code></dfn> method must run
73691-
these steps:</p>
73791+
<p>The <dfn method for="CustomElementRegistry"><code
73792+
data-x="dom-CustomElementRegistry-upgrade">upgrade(<var>root</var>)</code></dfn> method steps
73793+
are:</p>
7369273794

7369373795
<ol>
7369473796
<li><p>Let <var>candidates</var> be a <span>list</span> of all of <var>root</var>'s
@@ -73720,6 +73822,59 @@ console.assert(el instanceof SpiderMan); // upgraded!</code></pre>
7372073822

7372173823
<div w-nodev>
7372273824

73825+
<p>The <dfn method for="CustomElementRegistry"><code
73826+
data-x="dom-CustomElementRegistry-createElement">createElement(<var>name</var>)</code></dfn>
73827+
method steps are:</p>
73828+
73829+
<ol>
73830+
<li><p>If <var>name</var> does not match the XML <code data-x="xml-Name">Name</code> production,
73831+
then throw an <span>"<code>InvalidCharacterError</code>"</span>
73832+
<code>DOMException</code>.</p></li>
73833+
73834+
<li><p>Return the result of <span data-x="create an element">creating an element</span> given
73835+
<span>this</span>'s <span>relevant global object</span>'s <span
73836+
data-x="concept-document-window">associated <code>Document</code></span>, <var>name</var>, the
73837+
<span>HTML namespace</span>, null, null, true, and <span>this</span>.</p></li>
73838+
</ol>
73839+
73840+
<p>The <dfn method for="CustomElementRegistry"><code
73841+
data-x="dom-CustomElementRegistry-cloneSubtree">cloneSubtree(<var>root</var>)</code></dfn>
73842+
method steps are:</p>
73843+
73844+
<ol>
73845+
<li><p>If <var>root</var> is a <code>Document</code> or <code>ShadowRoot</code> object, then
73846+
throw a <span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>
73847+
73848+
<li><p>Return the result of <span data-x="concept-node-clone">cloning a node</span> given
73849+
<var>root</var> with <span data-x="concept-node-clone-subtree"><i>subtree</i></span> set to true
73850+
and <span data-x="concept-node-clone-fallbackRegistry"><i>fallbackRegistry</i></span> set
73851+
<span>this</span>.</p></li>
73852+
</ol>
73853+
73854+
<p>The <dfn method for="CustomElementRegistry"><code
73855+
data-x="dom-CustomElementRegistry-initializeSubtree">initializeSubtree(<var>root</var>)</code></dfn>
73856+
method steps are:</p>
73857+
73858+
<ol>
73859+
<li>
73860+
<p>For each <span>inclusive descendant</span> <var>inclusiveDescendant</var> of
73861+
<var>root</var>:</p>
73862+
73863+
<ol>
73864+
<li><p>If <var>inclusiveDescendant</var> is an <code>Element</code> node whose <span
73865+
data-x="element-custom-element-registry">custom element registry</span> is null, then set
73866+
<var>inclusiveDescendant</var>'s <span data-x="element-custom-element-registry">custom element
73867+
registry</span> to <span>this</span>.</p></li>
73868+
73869+
<li><p>Otherwise, if <var>inclusiveDescendant</var> is a <code>ShadowRoot</code> node whose
73870+
<span data-x="shadow-root-custom-element-registry">custom element registry</span> is null, set
73871+
<var>inclusiveDescendant</var>'s <span data-x="shadow-root-custom-element-registry">custom
73872+
element registry</span> to <span>this</span>.</p></li>
73873+
</ol>
73874+
</li>
73875+
</ol>
73876+
73877+
7372373878
<h4><dfn data-x="custom-element-upgrades">Upgrades</dfn></h4>
7372473879

7372573880
<p>To <dfn data-x="concept-upgrade-an-element" export>upgrade an element</dfn>, given as input a
@@ -73791,8 +73946,14 @@ customElements.define("x-foo", class extends HTMLElement {
7379173946
<li><p>Let <var>C</var> be <var>definition</var>'s <span
7379273947
data-x="concept-custom-element-definition-constructor">constructor</span>.</p></li>
7379373948

73949+
<li><p>Let <var>registry</var> be <var>element</var>'s <span
73950+
data-x="element-custom-element-registry">custom element registry</span>.</p></li>
73951+
73952+
<li><p><span data-x="map set">Set</span> the <span>surrounding agent</span>'s <span>active custom
73953+
element constructor map</span>[<var>C</var>] to <var>registry</var>.</p></li>
73954+
7379473955
<li>
73795-
<p>Run the following substeps while catching any exceptions:</p>
73956+
<p>Run the following steps while catching any exceptions:</p>
7379673957

7379773958
<ol>
7379873959
<li>
@@ -73834,10 +73995,18 @@ customElements.define("x-foo", class extends HTMLElement {
7383473995
</li>
7383573996
</ol>
7383673997

73837-
<p>Then, perform the following substep, regardless of whether the above steps threw an exception
73998+
<p>Then, perform the following steps, regardless of whether the above steps threw an exception
7383873999
or not:</p>
7383974000

7384074001
<ol>
74002+
<li>
74003+
<p><span data-x="map remove">Remove</span> <var>registry</var>'s <span>relevant global
74004+
object</span>'s <span>active custom element constructor map</span>[<var>C</var>].</p>
74005+
74006+
<p class="note">This is a no-op if <var>C</var> immediately calls <code
74007+
data-x="">super()</code> as it ought to do.</p>
74008+
</li>
74009+
7384174010
<li>
7384274011
<p>Remove the last entry from the end of <var>definition</var>'s <span
7384374012
data-x="concept-custom-element-definition-construction-stack">construction stack</span>.</p>
@@ -73893,15 +74062,16 @@ customElements.define("x-foo", class extends HTMLElement {
7389374062
element state</span> to "<code data-x="">custom</code>".</p></li>
7389474063
</ol>
7389574064

73896-
<p>To <dfn data-x="concept-try-upgrade" export>try to upgrade an element</dfn>, given as input an
73897-
element <var>element</var>, run the following steps:</p>
74065+
<p>To <dfn data-x="concept-try-upgrade" export>try to upgrade an element</dfn> given an element
74066+
<var>element</var>:</p>
7389874067

7389974068
<ol>
7390074069
<li><p>Let <var>definition</var> be the result of <span data-x="look up a custom element
73901-
definition">looking up a custom element definition</span> given <var>element</var>'s <span>node
73902-
document</span>, <var>element</var>'s namespace, <var>element</var>'s local name, and
73903-
<var>element</var>'s <span data-x="concept-element-is-value"><code data-x="">is</code>
73904-
value</span>.</p></li>
74070+
definition">looking up a custom element definition</span> given <var>element</var>'s <span
74071+
data-x="element-custom-element-registry">custom element registry</span>, <var>element</var>'s
74072+
<span data-x="concept-element-namespace">namespace</span>, <var>element</var>'s <span
74073+
data-x="concept-element-local-name">local name</span>, and <var>element</var>'s <span
74074+
data-x="concept-element-is-value"><code data-x="">is</code> value</span>.</p></li>
7390574075

7390674076
<li><p>If <var>definition</var> is not null, then <span>enqueue a custom element upgrade
7390774077
reaction</span> given <var>element</var> and <var>definition</var>.</p></li>
@@ -74255,9 +74425,10 @@ customElements.define("x-foo", class extends HTMLElement {
7425574425
<code>DOMException</code>.</p></li>
7425674426

7425774427
<li><p>Let <var>definition</var> be the result of <span data-x="look up a custom element
74258-
definition">looking up a custom element definition</span> given <span>this</span>'s <span>node
74259-
document</span>, its namespace, its local name, and null as the <span
74260-
data-x="concept-element-is-value"><code data-x="">is</code> value</span>.</p></li>
74428+
definition">looking up a custom element definition</span> given <span>this</span>'s <span
74429+
data-x="element-custom-element-registry">custom element registry</span>, <span>this</span>'s
74430+
<span data-x="concept-element-namespace">namespace</span>, <span>this</span>'s <span
74431+
data-x="concept-element-local-name">local name</span>, and null.</p></li>
7426174432

7426274433
<li><p>If <var>definition</var> is null, then throw an
7426374434
<span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>
@@ -130214,8 +130385,11 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
130214130385
<li><p>Let <var>is</var> be the value of the "<code data-x="attr-is">is</code>" attribute in the
130215130386
given token, if such an attribute exists, or null otherwise.</p></li>
130216130387

130388+
<li><p>Let <var>registry</var> be the result of <span data-x="look up a custom element
130389+
registry">looking up a custom element registry</span> given <var>intended parent</var>.</p></li>
130390+
130217130391
<li><p>Let <var>definition</var> be the result of <span data-x="look up a custom element
130218-
definition">looking up a custom element definition</span> given <var>document</var>, <var>given
130392+
definition">looking up a custom element definition</span> given <var>registry</var>, <var>given
130219130393
namespace</var>, <var>local name</var>, and <var>is</var>.</p></li>
130220130394

130221130395
<li><p>Let <var>willExecuteScript</var> be true if <var>definition</var> is non-null and the
@@ -131120,7 +131294,8 @@ document.body.appendChild(text);
131120131294
<li>
131121131295
<p><span data-x="concept-attach-a-shadow-root">Attach a shadow root</span> with
131122131296
<var>declarative shadow host element</var>, <var>mode</var>, <var>clonable</var>,
131123-
<var>serializable</var>, <var>delegatesFocus</var>, and "<code data-x="">named</code>".</p>
131297+
<var>serializable</var>, <var>delegatesFocus</var>, "<code data-x="">named</code>", and
131298+
<var>registry</var>.</p>
131124131299

131125131300
<p>If an exception is thrown, then catch it and:</p>
131126131301

@@ -131144,6 +131319,10 @@ document.body.appendChild(text);
131144131319
<var>shadow</var>.</p></li>
131145131320

131146131321
<li><p>Set <var>shadow</var>'s <span>available to element internals</span> to true.</p></li>
131322+
131323+
<li><p>If <var>template start tag</var> has a <code
131324+
data-x="attr-template-shadowrootcustomelements">shadowrootcustomelements</code> attribute,
131325+
then set <var>shadow</var>'s <span>keep custom element registry null</span> to true.</p></li>
131147131326
</ol>
131148131327
</li>
131149131328
</ol>
@@ -134948,6 +135127,11 @@ document.body.appendChild(text);
134948135127
<li><p>If <var>shadow</var>'s <span>clonable</span> is set, then append
134949135128
"<code data-x=""> shadowrootclonable=&quot;&quot;</code>".</p></li>
134950135129

135130+
<li><p>If <var>current node</var>'s <span data-x="element-custom-element-registry">custom
135131+
element registry</span> is not <var>shadow</var>'s <span
135132+
data-x="shadow-root-custom-element-registry">custom element registry</span>, then append
135133+
"<code data-x=""> shadowrootcustomelements=&quot;&quot;</code>".</p></li>
135134+
134951135135
<li><p>Append "<code data-x="">&gt;</code>".</p></li>
134952135136

134953135137
<li><p>Append the value of running the <span>HTML fragment serialization algorithm</span> with
@@ -135361,8 +135545,9 @@ console.assert(container.firstChild instanceof SuperP);
135361135545
</li>
135362135546

135363135547
<li><p>Let <var>root</var> be the result of <span data-x="create an element">creating an
135364-
element</span> given <var>document</var>, "<code data-x="">html</code>", and the <span>HTML
135365-
namespace</span>.</p></li>
135548+
element</span> given <var>document</var>, "<code data-x="">html</code>", the <span>HTML
135549+
namespace</span>, null, null, false, and <var>context</var>'s <span
135550+
data-x="element-custom-element-registry">custom element registry</span>.</p></li>
135366135551

135367135552
<li><p><span data-x="concept-node-append">Append</span> <var>root</var> to
135368135553
<var>document</var>.</p></li>
@@ -142618,7 +142803,8 @@ interface <dfn interface>External</dfn> {
142618142803
<code data-x="attr-template-shadowrootmode">shadowrootmode</code>;
142619142804
<code data-x="attr-template-shadowrootdelegatesfocus">shadowrootdelegatesfocus</code>;
142620142805
<code data-x="attr-template-shadowrootclonable">shadowrootclonable</code>;
142621-
<code data-x="attr-template-shadowrootserializable">shadowrootserializable</code></td>
142806+
<code data-x="attr-template-shadowrootserializable">shadowrootserializable</code>;
142807+
<code data-x="attr-template-shadowrootcustomelements">shadowrootcustomelements</code></td>
142622142808
<td><code>HTMLTemplateElement</code></td>
142623142809
</tr>
142624142810

@@ -144102,6 +144288,11 @@ interface <dfn interface>External</dfn> {
144102144288
<td> <code data-x="attr-template-shadowrootclonable">template</code>
144103144289
<td> Sets <span>clonable</span> on a declarative shadow root
144104144290
<td> <span>Boolean attribute</span>
144291+
<tr>
144292+
<th> <code data-x="">shadowrootcustomelements</code>
144293+
<td> <code data-x="attr-template-shadowrootcustomelements">template</code>
144294+
<td> Enables declarative shadow roots to indicate they will use a custom element registry
144295+
<td> <span>Boolean attribute</span>
144105144296
<tr>
144106144297
<th> <code data-x="">shadowrootdelegatesfocus</code>
144107144298
<td> <code data-x="attr-template-shadowrootdelegatesfocus">template</code>

0 commit comments

Comments
 (0)
Please sign in to comment.