Web Components 系列之 關于 Custom Elements
本文轉載自微信公眾號「編程三昧」，作者隱逸王。轉載本文請聯系編程三昧公眾號。
前言
在上一篇文章中介紹了 Web Components 的相關概念，知道它是瀏覽器用來原生支持“組件化”的方法，并且知曉它的技術組成為：
- Custom Elements
- Shadow DOM
- HTML templates
今天，我們就來學習它的技術之一——Custom Element 的部分相關知識。
Custom Elements 的意義
Web Components 標準非常重要的一個特性是，它使開發者能夠將 HTML 頁面的功能封裝為 custom elements(自定義標簽)，而往常，開發者不得不寫一大堆冗長、深層嵌套的標簽來實現同樣的頁面功能。
Custom Elements 是網頁組件化的基礎，也是其核心。
Custom Elements 的分類
根據是否繼承基礎 HTML 元素，將 Custom Elements 分為兩類。
Autonomous custom elements
是獨立的元素，它不繼承其他內建的 HTML 元素。你可以直接把它們寫成HTML標簽的形式，來在頁面上使用。例如 ，或者是document.createElement("my-card")這樣。
Customized built-in elements
繼承自基本的HTML元素。在創建時，你必須指定所需擴展的元素，使用時，需要先寫出基本的元素標簽，并通過 is 屬性指定custom element的名稱。例如
, 或者 document.createElement("p", { is: "my-card" })。
CustomElementRegistry 對象
我們對自定義標簽的概念等相關知識已有了解，那在實際開發中到底怎么使用自定義標簽呢?這里就需要介紹一下 Custom Elements 的重點對象——CustomElementRegistry 對象。
要獲取它的實例，請使用 window.customElements 屬性。它的主要作用有：
給頁面注冊一個自定義標簽
獲取已注冊的 Custom Elements 的相關信息
我們來看一下 CustomElementRegistry 對象的相關方法：
可以看到， CustomElementRegistry 對象包含四個方法：
- CustomElementRegistry.define()
- CustomElementRegistry.get()
- CustomElementRegistry.upgrade()
- CustomElementRegistry.whenDefined()
接下來，我們分別介紹一下 CustomElementRegistry 對象的各個方法。
CustomElementRegistry.define()
它被用來定義(創建)一個自定義標簽。語法如下：
customElements.define(name, constructor, options);
參數解析：
- name 自定義標簽名。注意：它不能是單個單詞，且其中必須要有短橫線，比如：my-card 這樣的。
- constructor 自定義元素構造器，它可以控制元素的表現形式、行為和生命周期等。
- options 一個包含 extends 屬性的配置對象，是可選參數。它指定了所創建的元素繼承自哪個內置元素，可以繼承任何內置元素。
返回值為 undefined。
使用示例：
// 聲明自定義標簽構造函數類
class MyCard extends HTMLParagraphElement{
constructor(){
super();
……
}
}
// 注冊自定義標簽
customElements.define('my-card', MyCard, { extends: 'p' });
CustomElementRegistry.get()
該方法用于返回之前定義的自定義標簽的構造函數。語法如下：
constructor = customElements.get(name);
name 表示想要獲取的自定義標簽構造函數的標簽名，其格式也應該為短橫線連接的單詞。
指定名字的自定義元素的構造函數，如果沒有使用該名稱的自定義元素定義，則為undefined。
使用示例：
// 調用 get 方法
customElements.get("my-card");
// class MyCard extends HTMLParagraphElement{
// constructor(){
// super();
// }
// }
customElements.get("MyCard");
// undefined
CustomElementRegistry.upgrade()
該方法將更新 root 子樹中所有包含影子 DOM 的自定義元素，甚至在它們載入主文檔之前也可以更新。語法如下：
customElements.upgrade(root);
root 表示帶有要升級的包含陰影的后代元素的Node實例。如果沒有可以升級的后代元素，則不會拋出錯誤。
其返回值為 undefined。
不調用 upgrade 方法：
const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
console.log(el instanceof MyCard); // false
調用 upgrade 方法：
const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
customElements.upgrade(el);
console.log(el instanceof MyCard); // true
CustomElementRegistry.whenDefined()
返回當使用給定名稱定義自定義元素時將會執行的 promise。如果已經定義了這樣一個自定義元素，那么立即執行返回的 promise。語法如下：
Promise<> customElements.whenDefined(name);
name 還是表示自定義標簽的名稱。
示例一：
class MyCard extends HTMLParagraphElement {
constructor() {
super();
}
}
customElements.whenDefined("my-card").then(() => {
console.log(`my-card 被注冊`);
});
console.log("my-card 注冊前");
customElements.define("my-card", MyCard, { extends: "p" });
console.log("my-card 注冊后");
// my-card 注冊前
// my-card 注冊后
// my-card 被注冊
如果再次執行以下代碼，則會立即執行 resolve 方法：
customElements.whenDefined("my-card").then((res) => {
console.log(res);
console.log(`my-card 被注冊`);
});
// my-card 被注冊
總結
以上就是關于 Custom Elements 的部分知識點，后續會補充自定義標簽的生命周期函數等內容。
