Element Upgrades

Web Components ⟩ Custom Elements ⟩

👉 相關

• <time-formatted> - example

• tagName vs. nodeName

📘 手冊

🗣 討論

• Custom elements can be used before their definition is registered.

• The process of calling customElements.define() and endowing an existing element with a class definition is called "element upgrades". 📘 Google ⟩ Element Upgrades

If browser encounters <custom-element> before customElements.define(), the element is yet unknown, just like any non-standard tag. Undefined elements can be styled with CSS selector:not(:defined).

When customElement.define() is called, they are “upgraded”: a new instance of CustomElement is created for each, and connectedCallback is called. They become :defined. 👉 pseudo-class

.whenDefined()

To know when a tag name becomes defined, you can use customElements.whenDefined(). It returns a Promise that resolves when the element becomes defined.

whenDefined()

customElements.whenDefined('custom-element').then(() => {
  console.log('custom-element defined');
});

Promise