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

前言

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

• Custom Elements
• Shadow DOM
• HTML templates

今天，我們就來學(xué)習(xí)它的技術(shù)之一——Custom Element 的部分相關(guān)知識(shí)。

Custom Elements 的意義

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

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

Custom Elements 的分類

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

Autonomous custom elements

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

Customized built-in elements

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

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

CustomElementRegistry 對(duì)象

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

要獲取它的實(shí)例，請(qǐng)使用 window.customElements 屬性。它的主要作用有：

給頁(yè)面注冊(cè)一個(gè)自定義標(biāo)簽

獲取已注冊(cè)的 Custom Elements 的相關(guān)信息

我們來看一下 CustomElementRegistry 對(duì)象的相關(guān)方法：

可以看到， CustomElementRegistry 對(duì)象包含四個(gè)方法：

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

接下來，我們分別介紹一下 CustomElementRegistry 對(duì)象的各個(gè)方法。

CustomElementRegistry.define()

它被用來定義(創(chuàng)建)一個(gè)自定義標(biāo)簽。語(yǔ)法如下：

customElements.define(name, constructor, options);

參數(shù)解析：

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

返回值為 undefined。

使用示例：

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

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

CustomElementRegistry.get()

該方法用于返回之前定義的自定義標(biāo)簽的構(gòu)造函數(shù)。語(yǔ)法如下：

constructor = customElements.get(name);

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

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

使用示例：

// 調(diào)用 get 方法
customElements.get("my-card");

// class MyCard extends HTMLParagraphElement{
//     constructor(){
//         super();        
//     }
// }

customElements.get("MyCard");
// undefined

CustomElementRegistry.upgrade()

該方法將更新 root 子樹中所有包含影子 DOM 的自定義元素，甚至在它們載入主文檔之前也可以更新。語(yǔ)法如下：

customElements.upgrade(root);

root 表示帶有要升級(jí)的包含陰影的后代元素的Node實(shí)例。如果沒有可以升級(jí)的后代元素，則不會(huì)拋出錯(cuò)誤。

其返回值為 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()

返回當(dāng)使用給定名稱定義自定義元素時(shí)將會(huì)執(zhí)行的 promise。如果已經(jīng)定義了這樣一個(gè)自定義元素，那么立即執(zhí)行返回的 promise。語(yǔ)法如下：

Promise<> customElements.whenDefined(name);

name 還是表示自定義標(biāo)簽的名稱。

示例一：

class MyCard extends HTMLParagraphElement {
    constructor() {
        super();
    }
}

customElements.whenDefined("my-card").then(() => {
    console.log(`my-card 被注冊(cè)`);
});
console.log("my-card 注冊(cè)前");
customElements.define("my-card", MyCard, { extends: "p" });
console.log("my-card 注冊(cè)后");

// my-card 注冊(cè)前
// my-card 注冊(cè)后
// my-card 被注冊(cè)

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

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

總結(jié)

以上就是關(guān)于 Custom Elements 的部分知識(shí)點(diǎn)，后續(xù)會(huì)補(bǔ)充自定義標(biāo)簽的生命周期函數(shù)等內(nèi)容。