Skip to content

Commit 6df4863

Browse files
domenicdomenic
authored
Add customElements.upgrade()
Closes WICG/webcomponents#710.
1 parent 7e941ae commit 6df4863

File tree

1 file changed

+40
-1
lines changed

1 file changed

+40
-1
lines changed

‎source

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3147,7 +3147,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
31473147
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order">shadow-including tree order</dfn> concepts</li>
31483148
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-child" data-x="concept-tree-child">child</dfn> concept</li>
31493149
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-root">root</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-root">shadow-including root</dfn> concepts</li>
3150-
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn> concepts</li>
3150+
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn>,
3151+
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn>, and
3152+
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-descendant">shadow-including inclusive descendant</dfn> concepts</li>
31513153
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-first-child">first child</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-next-sibling">next sibling</dfn> concepts</li>
31523154
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#document-element">document element</dfn> concept</li>
31533155
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#in-a-document-tree">in a document tree</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#in-a-document">in a document</dfn> (legacy), and <dfn data-x-href="https://dom.spec.whatwg.org/#connected">connected</dfn> concepts</li>
@@ -66186,6 +66188,7 @@ interface <dfn>CustomElementRegistry</dfn> {
6618666188
[<span>CEReactions</span>] void <span data-x="dom-CustomElementRegistry-define">define</span>(DOMString name, Function constructor, optional ElementDefinitionOptions options);
6618766189
any <span data-x="dom-CustomElementRegistry-get">get</span>(DOMString name);
6618866190
Promise&lt;void&gt; <span data-x="dom-CustomElementRegistry-whenDefined">whenDefined</span>(DOMString name);
66191+
[<span>CEReactions</span>] void <span data-x="dom-CustomElementRegistry-upgrade">upgrade</span>(<span>Node</span> root);
6618966192
};
6619066193

6619166194
dictionary <dfn>ElementDefinitionOptions</dfn> {
@@ -66243,6 +66246,13 @@ dictionary <dfn>ElementDefinitionOptions</dfn> {
6624366246
promise will be immediately fulfilled.) Returns a promise rejected with a
6624466247
<span>"<code>SyntaxError</code>"</span> <code>DOMException</code> if not given a <span>valid
6624566248
custom element name</span>.</dd>
66249+
66250+
<dt><var>window</var> . <code data-x="dom-window-customElements">customElements</code> . <code
66251+
subdfn data-x="dom-CustomElementRegistry-upgrade">upgrade</code>(<var>root</var>)</dt>
66252+
66253+
<dd><span data-x="concept-try-upgrade">Tries to upgrade</span> all <span>shadow-including
66254+
inclusive descendant</span> elements of <var>root</var>, even if they are not
66255+
<span>connected</span>.</dd>
6624666256
</dl>
6624766257

6624866258
<p><dfn>Element definition</dfn> is a process of adding a <span>custom element definition</span>
@@ -66462,6 +66472,35 @@ fetch(articleURL)
6646266472
});</pre>
6646366473
</div>
6646466474

66475+
<p>When invoked, the <dfn><code
66476+
data-x="dom-CustomElementRegistry-upgrade">upgrade(<var>root</var>)</code></dfn> method must run
66477+
these steps:</p>
66478+
66479+
<ol>
66480+
<li><p>Let <var>candidates</var> be a <span>list</span> of all of <var>root</var>'s
66481+
<span>shadow-including inclusive descendant</span> elements, in <span>tree order</span>.</p></li>
66482+
66483+
<li><p><span data-x="list iterate">For each</span> <var>candidate</var> of <var>candidates</var>,
66484+
<span data-x="concept-try-upgrade">try to upgrade</span> <var>candidate</var>.</p></li>
66485+
</ol>
66486+
66487+
<div class="example">
66488+
<p>The <code data-x="dom-CustomElementRegistry-upgrade">upgrade()</code> method allows upgrading
66489+
of elements at will. Normally elements are automatically upgraded when they become
66490+
<span>connected</span>, but this method can be used if you need to upgrade before you're ready to
66491+
connect the element.</p>
66492+
66493+
<pre>const el = document.createElement("spider-man");
66494+
66495+
class SpiderMan extends HTMLElement {}
66496+
customElements.define("spider-man", SpiderMan);
66497+
66498+
console.assert(!(el instanceof SpiderMan)); // not yet upgraded
66499+
66500+
customElements.upgrade(el);
66501+
console.assert(el instanceof SpiderMan); // upgraded!</pre>
66502+
</div>
66503+
6646566504
<h4><dfn data-x="custom-element-upgrades">Upgrades</dfn></h4>
6646666505

6646766506
<p>To <dfn data-x="concept-upgrade-an-element" data-export="">upgrade an element</dfn>, given as

0 commit comments

Comments
 (0)