From db8899be5b0971a3c43b8a2ac926a5df1f5bc2b9 Mon Sep 17 00:00:00 2001
From: Domenic Denicola
In general, the constructor should be used to set up initial state and default values, and - to set up event listeners and possibly a shadow root
.Several of these requirements are checked during element
@@ -67229,6 +67229,7 @@ console.log(plasticButton2.getAttribute("is")); // will output "plastic-button"<
interface CustomElementsRegistry {
void define(DOMString name, Function constructor, optional ElementRegistrationOptions options);
any get(DOMString name);
+ [NewObject] Promise<void> whenDefined(DOMString name);
};
dictionary ElementRegistrationOptions {
@@ -67242,6 +67243,12 @@ dictionary ElementRegistrationOptions {
data-x="concept-custom-element-definition-local-name">local name
, or constructor.
Every CustomElementsRegistry
also has a when-defined promise map,
+ mapping valid custom element names to lists of
+ promises. It is used to implement the whenDefined()
method. Storing a promise in
+ the when-defined promise map must not create a strong reference to that promise.
customElements
. define
(name,
@@ -67267,6 +67274,14 @@ dictionary ElementRegistrationOptions {
data-x="concept-custom-element-definition-name">name. Returns undefined if there is no
custom element definition with the given name.
+
+ customElements
. whenDefined
(name)SyntaxError
if not given a valid custom element name.Element definition is a process of adding a custom element definition @@ -67363,6 +67378,21 @@ dictionary ElementRegistrationOptions { attributeChangedCallback (stored by their corresponding name).
Add definition to this CustomElementsRegistry
.
If this CustomElementsRegistry
's when-defined promise map
+ contains an entry with key name:
Let promiseList be the value of that entry.
For each promise in promiseList, resolve promise with + undefined.
Delete the entry with key name from this
+ CustomElementsRegistry
's when-defined promise map.
When invoked, the ElementRegistrationOptions
{
Otherwise, return undefined.
When invoked, the whenDefined(name)
method
+ must run these steps:
If name is not a valid custom element name, then return a new
+ promise rejected with a SyntaxError
exception and abort these steps.
If this CustomElementsRegistry
contains an entry with name name, then return a new
+ promise resolved with undefined and abort these steps.
Let map be this CustomElementsRegistry
's when-defined
+ promise map.
If map does not contain an entry with key name, create an entry in + map with key name and whose value is an empty list.
Let promiseList be the value of the entry in map with key + name.
Let promise be a new promise, and append promise to + promiseList.
Return promise.
The whenDefined()
method can be
+ used to avoid performing an action until all appropriate custom
+ elements are defined. In this example, we
+ combine it with the :defined
pseudo-class to hide a
+ dynamically-loaded article's contents until we're sure that all of the autonomous custom elements it uses are defined.
articleContainer.hidden = true; + +fetch(articleURL) + .then(response => response.text()) + .then(text => { + articleContainer.innerHTML = text; + + return Promise.all( + [...articleContainer.querySelectorAll(":not(:defined)")] + .map(el => customElements.whenDefined(el.localName)) + ); + }) + .then(() => { + articleContainer.hidden = false; + });+
To upgrade an element, given as @@ -119337,6 +119419,7 @@ INSERT INTERFACES HERE J. King, Jacob Davies, Jacques Distler, + Jake Archibald, Jake Verbaten, Jakub Łopuszański, Jakub Wilk,