?1.寫在前面

最近哈啰單車前端團(tuán)隊(duì)開(kāi)源的Quark Design組件庫(kù)，號(hào)稱是下一代前端組件庫(kù)，可以同時(shí)在任意框架或無(wú)框架中使用。

那么，什么是Web Components？

2.什么是Web Components？

現(xiàn)今前端生態(tài)中框架層出不窮，在生產(chǎn)中為了提升效率和標(biāo)準(zhǔn)化組件，就會(huì)針對(duì)框架開(kāi)發(fā)組件庫(kù)。但是各種框架之間是不兼容的，對(duì)此需要對(duì)應(yīng)開(kāi)發(fā)適應(yīng)框架的組件庫(kù)，這樣也造成維護(hù)成本攀升。就如同物理界有電磁相互作用、強(qiáng)相互作用以及弱相互作用，需要單獨(dú)的物理理論來(lái)解釋這三種作用造成的物理現(xiàn)象，這樣讓眾多物理學(xué)家在朝著大統(tǒng)一理論前進(jìn)，而Web Components可以看作是現(xiàn)今UI組件庫(kù)"大統(tǒng)一理論"的一種解決方案。

Web Components與React、Vue?等框架中的組件類似，其實(shí)在Vue中也采用了很多基于Web Components?的設(shè)計(jì)。這是一個(gè)可復(fù)用的UI構(gòu)建模塊，封裝了所有渲染所需要的HTML、CSS?以及基于Javascript?的邏輯。最大的區(qū)別是，它不依賴于特定的JavaScript框架，而是利用瀏覽器原生提供的技術(shù)，這樣你的Web組件就與框架無(wú)關(guān)了。

3.Web Components的主要內(nèi)容

Web Components的主要內(nèi)容如下：

• Custom Elements?：原生提供的API，用于可自定義Custom Elements和行為。
• Shadow DOM：原生提供的API，用于封裝與主文檔DOM隔離的私有DOM，不受外部DOM的樣式和行為的影響。
• Templates：
• Attributes：
• Slots：
• Life cycle methods：

接下來(lái)，跟隨我的腳步在例子中逐個(gè)實(shí)現(xiàn)這些概念，逐個(gè)擊破理論。

4.Custom Elements

Custom Elements是Web Components?中的一個(gè)重要特性，可以提供給開(kāi)發(fā)者將html的功能封裝為自定義標(biāo)簽，方便進(jìn)行復(fù)用。也就是說(shuō)，Custom Elements?本質(zhì)上是用戶用于實(shí)現(xiàn)在html?中有效使用的，類似<div>、<button>?等自定義標(biāo)簽。最大區(qū)別在于，自定義標(biāo)簽有著自己的模板、行為和標(biāo)簽名稱，通過(guò)Javascript的API實(shí)現(xiàn)的。

Custom Elements?總是使用連字符-?進(jìn)行自定義標(biāo)簽的標(biāo)識(shí)，即<one-button/>?，各大瀏覽器公司達(dá)成公司不在創(chuàng)建任何新的標(biāo)簽元素，來(lái)防止元素沖突。熟悉vue框架的開(kāi)發(fā)者應(yīng)該知道，在vue中的自定義組件命令有<OneButton/>或<one-button/>?這種結(jié)構(gòu)，官方推薦的是<one-button/>這種使用方式。

通過(guò)customElements.define來(lái)簡(jiǎn)單注冊(cè)自定義組件，下面就來(lái)簡(jiǎn)單實(shí)踐下：

// one-button.js
// 1、創(chuàng)建自定義組件的類
class OneButton extends HTMLElement{
    constructor(){
        super()
        // 2、創(chuàng)建組件內(nèi)容
        this.innerHTML = `<button>hello onechuan</button>`
    }
}

// 3、進(jìn)行自定義組件的注冊(cè)
customElements.define("one-button", OneButton)

// index.html
// 4、html中進(jìn)行使用
<one-button></one-button>
<script src="./one-button.js"></script>

運(yùn)行展示：

5.Shadow DOM

Shadow DOM?與原生DOM的區(qū)別就是用戶自定義封裝的DOM，本質(zhì)上還是DOM元素。不同的是，Shadow DOM?可以將自定義的DOM片段與其他DOM進(jìn)行隔離，可以實(shí)現(xiàn)樣式不受外部DOM的影響，類似于使用iframe?內(nèi)嵌了一個(gè)html。也正是Shadow DOM的存在，能夠進(jìn)行DOM隔離、實(shí)現(xiàn)獨(dú)立的組件王國(guó)，使得自定義組件跨域框架的約束，不再耦合，確保在任何無(wú)框架和任何框架中正常使用。

如圖所示：

圖示來(lái)自MDN文檔

一些 Shadow DOM 特有的術(shù)語(yǔ)：

• Shadow host：一個(gè)常規(guī) DOM 節(jié)點(diǎn)，Shadow DOM 會(huì)被附加到這個(gè)節(jié)點(diǎn)上。
• Shadow tree：Shadow DOM 內(nèi)部的 DOM 樹(shù)。
• Shadow boundary：Shadow DOM 結(jié)束的地方，也是常規(guī) DOM 開(kāi)始的地方。
• Shadow root: Shadow tree 的根節(jié)點(diǎn)。

Shadow DOM ?并不是新生事物，在原生<video>?標(biāo)簽中其實(shí)就有內(nèi)置的Shadow DOM ?，包含一系列的按鈕和其他控制器等。而Web Components?只不過(guò)是允許用戶根據(jù)需要使用Shadow DOM來(lái)實(shí)現(xiàn)自定義標(biāo)簽。

那么，就接著上面的例子一起來(lái)實(shí)現(xiàn)下：

// one-button.js
// 1、創(chuàng)建自定義組件的類
class OneButton extends HTMLElement{
    constructor(){
        super()
        // 2、創(chuàng)建shadow dom
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `<button>hello onechuan</button>`
    }
}

// 3、進(jìn)行自定義組件的注冊(cè)
customElements.define("one-button", OneButton)

運(yùn)行得到：

在上面運(yùn)行結(jié)果中，實(shí)現(xiàn)的展示效果是一樣，但是渲染的dom節(jié)點(diǎn)卻有所不同，在使用shadow dom?實(shí)現(xiàn)的標(biāo)簽中會(huì)有#shadow-root字樣標(biāo)識(shí)。

接下來(lái)，我們給他們添加上樣式，進(jìn)行對(duì)比：

<button>hello yichuan</button>
<one-button></one-button>
<style>
    button{
        font-size: 15px;
        padding: 12px;
        background-color: #e02727;
        color: #fff;
        line-height: 15px;
        cursor: pointer;
        border: none;
    }
</style>
<script>
    // 1、創(chuàng)建自定義組件的類
    class OneButton extends HTMLElement{
        constructor(){
            super()
            // 2、創(chuàng)建shadow dom
            this.attachShadow({mode: 'open'})
            this.shadowRoot.innerHTML = `<button>hello onechuan</button>`
        }
    }

    // 3、進(jìn)行自定義組件的注冊(cè)
    customElements.define("one-button", OneButton)
</script>

運(yùn)行結(jié)果：

在上面代碼片段中，在全局對(duì)button?標(biāo)簽進(jìn)行設(shè)置樣式，運(yùn)行結(jié)果表明并未影響到shadow dom中的樣式。

6.Template

見(jiàn)到template?模板，使用過(guò)vue框架的開(kāi)發(fā)者就再熟悉不過(guò)了，template?標(biāo)簽本身不會(huì)在html?中進(jìn)行立即渲染，而是用于對(duì)待使用的代碼進(jìn)行標(biāo)記，在需要被使用的時(shí)候才會(huì)進(jìn)行渲染。也正是因?yàn)閠emplate?的特性，使得我們可以將一些可重復(fù)使用的代碼用template?進(jìn)行組織，通過(guò)javascript獲取它的引用，再添加到DOM中。

For Example：

<one-button></one-button>
<template>
    <button>hello yichuan</button>
</template>
<script>
    const template = document.createElement("template")
    template.innerHTML = `<button>hello onechuan</button>`
    // 1、實(shí)現(xiàn)自定義組件的類
    class OneButton extends HTMLElement{
        // 2、定義自定義組件的內(nèi)容
        constructor(){
            super()
            // 2-1、創(chuàng)建影子DOM
            this.attachShadow({mode: "open"})
            // 2-2、設(shè)置影子DOM的內(nèi)容
            
            this.shadowRoot.appendChild(template.content.cloneNode(true))
        }
    }
    // 3、注冊(cè)自定義組件
    customElements.define("one-button", OneButton)
</script>

在上面代碼片段中，可以看到在需要使用的時(shí)候?qū)⒛０鍍?nèi)容追加到shadow dom中，即模板內(nèi)容不會(huì)立即被渲染，而是在被調(diào)用后才會(huì)在頁(yè)面進(jìn)行渲染。

注意：

為什么這里使用Node.cloneNode() 方法添加了模板的拷貝到陰影的根結(jié)點(diǎn)上？

這是因?yàn)樵谔砑幽０鍍?nèi)容到shadow dom?時(shí)，后續(xù)可以添加樣式信息到模板的style標(biāo)簽上，也會(huì)將其封裝到自定義標(biāo)簽中，倘若直接將模板添加到原生DOM元素中不起作用的。

7.Slots

插槽由其name屬性標(biāo)識(shí)，并且允許您在模板中定義占位符，當(dāng)在標(biāo)記中使用該元素時(shí)，該占位符可以填充所需的任何 HTML 標(biāo)記片段。使用過(guò)vue框架的開(kāi)發(fā)者，對(duì)這部分內(nèi)容再熟悉不過(guò)了。

<one-button>
    <button>hello yichuan</button>
</one-button>
<script>
    const template = document.createElement("template")
    template.innerHTML = `
        <div>
            <slot><button>hello onechuan</button></slot>
        </div>
    `
    class OneButton extends HTMLElement{
        constructor(){
            super()
            this.attachShadow({mode:"open"})
            this.shadowRoot.appendChild(template.content.cloneNode(true))
        }
    }
    customElements.define("one-button",OneButton)
</script>

運(yùn)行結(jié)果：

在上面片段中，在使用自定義標(biāo)簽的時(shí)候，如果<one-button>?中沒(méi)有插入任何內(nèi)容，展示的將是hello onechuan?，倘若在在使用時(shí)插入了自定義內(nèi)容，則展示自定義內(nèi)容hello yichuan。

當(dāng)然，當(dāng)自定義組件中有多個(gè)地方使用插槽，可以通過(guò)給每個(gè)插槽命名進(jìn)行標(biāo)識(shí)，即：命名插槽。

類似于：vue中的mount。

<one-button>
    <button>hello yichuan</button>
    <span slot="desc">
        slot 這個(gè)我熟呀
    </span>
</one-button>
<script>
    const template = document.createElement("template")
    template.innerHTML = `
        <div>
            <slot>
                <button>hello onechuan</button>
            </slot>
            <slot name="desc"></slot>
        </div>
    `
    class OneButton extends HTMLElement{
        constructor(){
            super()
            this.attachShadow({mode:"open"})
            this.shadowRoot.appendChild(template.content.cloneNode(true))
        }
    }
    customElements.define("one-button",OneButton)
</script>

運(yùn)行結(jié)果：

?connectedCallback

connectedCallback?方法會(huì)在自定義組件插入DOM的首次渲染時(shí)調(diào)用一次。此時(shí) shadow dom?已經(jīng)掛載到DOM樹(shù)上，對(duì)此可以通過(guò)connectedCallback?方法來(lái)訪問(wèn)shadow dom上的屬性、子元素以及監(jiān)聽(tīng)事件。倘若組件被移除或被移動(dòng)，將會(huì)再次被調(diào)用。

<one-button></one-button>
<script>
    customElements.define("one-button",class extends HTMLElement{
        constructor(){
            super()
            this.attachShadow({mode:"open"})
            this.shadowRoot.innerHTML = `
                <button>登錄</button>
            `
        }
        connectedCallback(){
            console.log("初始化");
            this.addEventListener("click",()=>{
                console.log("this id a click handler");
            })
        }
    })
</script>

運(yùn)行結(jié)果：

在上面代碼片段中，看到在進(jìn)行渲染初始化后，會(huì)進(jìn)行執(zhí)行一次connectedCallback的內(nèi)容。

?attributeChangedCallback

監(jiān)聽(tīng)custom element?自身屬性的增刪改，當(dāng)發(fā)生狀態(tài)改變時(shí)調(diào)用此方法，在使用前必須在一個(gè)observedAttributes() ?的靜態(tài)方法中定義要觀察的屬性。該方法返回一個(gè)屬性名稱的數(shù)組。一旦observedAttributes?返回了屬性值數(shù)組，則attributeChangedCallback方法會(huì)在每次該屬性變化時(shí)調(diào)用。

這個(gè)方法有三個(gè)參數(shù)：屬性名稱被改變，該屬性的舊值，以及更新的值。當(dāng)this.setAttribute()觸發(fā)時(shí)，屬性會(huì)被更新。

disconnectedCallback

當(dāng) custom element? 從文檔 DOM? 中刪除時(shí)，disconnectedCallback被調(diào)用。

<script>
customElements.define(
    "one-button",
    class extends HTMLElement {
        //...
        disconnectedCallback() {
            this.removeEventListener("click", ()=>{
                console.log("clicked handled");
            });
        }
    }
);

</script>

8.寫在最后

在我們上述實(shí)現(xiàn)的自定義組件，可以在整個(gè)項(xiàng)目中重復(fù)使用。簡(jiǎn)而言之，在構(gòu)建Web Components時(shí)，步驟如下：

• 首先，必須使用customElements.define()注冊(cè)自定義元素；
• 構(gòu)造函數(shù)會(huì)調(diào)用，將節(jié)點(diǎn)添加到shadow dom中
• 然后，進(jìn)行一次初始化，執(zhí)行connectedCallback方法；
• 當(dāng)元素的屬性被更新時(shí)，它的attributeChangedCallback()被觸發(fā)；
• 當(dāng)一個(gè)事件從元素中被移除時(shí)，disconnectedCallback()方法被調(diào)用以清理事件監(jiān)聽(tīng)器。
• shadow dom - 是DOM的一個(gè)封裝版本，用于防止CSS泄露。
• Slots ?- 用于添加和訪問(wèn)自定義元素組件的子元素，也有一種特殊的方式來(lái)訪問(wèn)使用命名為Slot的子元素。

本文參考和整理了許多文檔資料，學(xué)而知不足，繼續(xù)前行。

9.參考文章

《Web Components Basic to Advanced》

《MDN文檔》

《重磅！哈啰 Quark Design 正式開(kāi)源，下一代跨技術(shù)棧前端組件庫(kù)》