Element Upgrades

Web Components ⟩ Custom Elements ⟩

👉 相關

• <time-formatted> - example

• tagName vs. nodeName

📘 手冊

• Google ⟩ Custom Element Upgrades

• MDN ⟩

  • Element ⟩

    • tagName: string

    • localName: DOMString

  • Node ⟩

    • nodeName: DOMString

🗣 討論

• StackOverflow ⟩ What is the best way to get an element's tag name in JS?

• 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

<share-buttons>
  <social-button type="twitter"><a href="...">Twitter</a></social-button>
  <social-button type="fb"><a href="...">Facebook</a></social-button>
  <social-button type="plus"><a href="...">G+</a></social-button>
</share-buttons>


<script>
// Fetch all the children of <share-buttons> that are not defined yet.
let undefinedButtons = buttons.querySelectorAll(':not(:defined)');

let promises = [...undefinedButtons].map(socialButton => {
  return customElements.whenDefined(socialButton.localName);
});

// Wait for all the social-buttons to be upgraded.
Promise.all(promises).then(() => {
  // All social-button children are ready.
});
</script>