本文轉(zhuǎn)載自微信公眾號「編程三昧」，作者隱逸王。轉(zhuǎn)載本文請聯(lián)系編程三昧公眾號。

前言

在上一篇文章中介紹了 Web Components 的相關概念，知道它是瀏覽器用來原生支持“組件化”的方法，并且知曉它的技術組成為：

• Custom Elements
• Shadow DOM
• HTML templates

今天，我們就來學習它的技術之一——Custom Element 的部分相關知識。

Custom Elements 的意義

Web Components 標準非常重要的一個特性是，它使開發(fā)者能夠?qū)?HTML 頁面的功能封裝為 custom elements(自定義標簽)，而往常，開發(fā)者不得不寫一大堆冗長、深層嵌套的標簽來實現(xiàn)同樣的頁面功能。

Custom Elements 是網(wǎng)頁組件化的基礎，也是其核心。

Custom Elements 的分類

根據(jù)是否繼承基礎 HTML 元素，將 Custom Elements 分為兩類。

Autonomous custom elements

是獨立的元素，它不繼承其他內(nèi)建的 HTML 元素。你可以直接把它們寫成HTML標簽的形式，來在頁面上使用。例如 ，或者是document.createElement("my-card")這樣。

Customized built-in elements

繼承自基本的HTML元素。在創(chuàng)建時，你必須指定所需擴展的元素，使用時，需要先寫出基本的元素標簽，并通過 is 屬性指定custom element的名稱。例如

, 或者 document.createElement("p", { is: "my-card" })。

CustomElementRegistry 對象

我們對自定義標簽的概念等相關知識已有了解，那在實際開發(fā)中到底怎么使用自定義標簽呢?這里就需要介紹一下 Custom Elements 的重點對象——CustomElementRegistry 對象。

要獲取它的實例，請使用 window.customElements 屬性。它的主要作用有：

給頁面注冊一個自定義標簽

獲取已注冊的 Custom Elements 的相關信息

我們來看一下 CustomElementRegistry 對象的相關方法：

可以看到， CustomElementRegistry 對象包含四個方法：

• CustomElementRegistry.define()
• CustomElementRegistry.get()
• CustomElementRegistry.upgrade()
• CustomElementRegistry.whenDefined()

接下來，我們分別介紹一下 CustomElementRegistry 對象的各個方法。

CustomElementRegistry.define()

它被用來定義(創(chuàng)建)一個自定義標簽。語法如下：

customElements.define(name, constructor, options);

參數(shù)解析：

• name 自定義標簽名。注意：它不能是單個單詞，且其中必須要有短橫線，比如：my-card 這樣的。
• constructor 自定義元素構造器，它可以控制元素的表現(xiàn)形式、行為和生命周期等。
• options 一個包含 extends 屬性的配置對象，是可選參數(shù)。它指定了所創(chuàng)建的元素繼承自哪個內(nèi)置元素，可以繼承任何內(nèi)置元素。

返回值為 undefined。

使用示例：

// 聲明自定義標簽構造函數(shù)類
class MyCard extends HTMLParagraphElement{
    constructor(){
        super();
        ……
    }
}

// 注冊自定義標簽
customElements.define('my-card', MyCard, { extends: 'p' });

CustomElementRegistry.get()

該方法用于返回之前定義的自定義標簽的構造函數(shù)。語法如下：

constructor = customElements.get(name);

name 表示想要獲取的自定義標簽構造函數(shù)的標簽名，其格式也應該為短橫線連接的單詞。

指定名字的自定義元素的構造函數(shù)，如果沒有使用該名稱的自定義元素定義，則為undefined。

使用示例：

// 調(diào)用 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。

不調(diào)用 upgrade 方法：

const el = document.createElement("my-card");
class MyCard extends HTMLElement {}
customElements.define("my-card", MyCard);
console.log(el instanceof MyCard); // false

調(diào)用 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()

返回當使用給定名稱定義自定義元素時將會執(zhí)行的 promise。如果已經(jīng)定義了這樣一個自定義元素，那么立即執(zhí)行返回的 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 被注冊

如果再次執(zhí)行以下代碼，則會立即執(zhí)行 resolve 方法：

customElements.whenDefined("my-card").then((res) => {
    console.log(res);
    console.log(`my-card 被注冊`);
});
// my-card 被注冊

總結

以上就是關于 Custom Elements 的部分知識點，后續(xù)會補充自定義標簽的生命周期函數(shù)等內(nèi)容。