十分鐘帶你入門 Web Components

作者：Gopal 2022-06-16 07:31:41

Web Components 本身不是一個(gè)單獨(dú)的規(guī)范，而是由一組 DOM API 和 HTML 規(guī)范所組成，用于創(chuàng)建可復(fù)用的自定義名字的 HTML 標(biāo)簽，并且可以直接在你的 Web 應(yīng)用中使用。

什么是 web components

組件封裝，是我們前端一直在探討的話題。但現(xiàn)在我們的組件庫，更多的是基于某個(gè)框架去實(shí)現(xiàn)，比如 Vue 的 ElementUI，React 的 ANTD。這種組件的缺點(diǎn)就是對外部框架的依賴，你必須基于 Vue 或者 React 才能使用，假如某一天項(xiàng)目遷移又得重新書寫一套。

那能不能基于原生的 HTML/CSS/JS 就能封裝的組件規(guī)范呢？那就是 Web Components。

Web Components 本身不是一個(gè)單獨(dú)的規(guī)范，而是由一組 DOM API 和 HTML 規(guī)范所組成，用于創(chuàng)建可復(fù)用的自定義名字的 HTML 標(biāo)簽，并且可以直接在你的 Web 應(yīng)用中使用。

組件的定義以及核心目標(biāo)

我認(rèn)為組件就是內(nèi)部抽象封裝了一定的邏輯功能，并暴露相關(guān)接口給外部調(diào)用。

它能夠完成以下的功能：

復(fù)用:組件將會作為一種復(fù)用單元，被用在多處。
解耦:組件本身隔離了變化，組件開發(fā)者和業(yè)務(wù)開發(fā)者可以根據(jù)組件的約定各自獨(dú)立開發(fā)和測試。
封裝:組件屏蔽了內(nèi)部的細(xì)節(jié)，組件的使用者可以只關(guān)心組件的屬性和事件和方法。
抽象:組件通過屬性和事件、方法等基礎(chǔ)設(shè)施提供了一種描述??UI?? 的統(tǒng)一模式，降低了使用者學(xué)習(xí)的心智成本。

那 Web Components 怎么做到以上幾點(diǎn)的呢？

Web Components 的核心概念

主要有以下幾點(diǎn)：

Custom elements（自定義元素）：一組 JavaScript API，允許您定義 custom elements 及其行為，然后可以在您的用戶界面中按照需要使用它們。
Shadow DOM（影子 DOM）：一組 JavaScript API，用于將封裝的“影子”DOM 樹附加到元素（與主文檔 DOM 分開呈現(xiàn)）并控制其關(guān)聯(lián)的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔(dān)心與文檔的其他部分發(fā)生沖突。
HTML templates（HTML 模板）：<template>? 和<slot> 元素使您可以編寫不在呈現(xiàn)頁面中顯示的標(biāo)記模板。然后它們可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)被多次重用。

我們接下來通過封裝一個(gè) user-card Web Components 組件實(shí)戰(zhàn)說明一下。本文 Demo 地址[1]。

HTML 模板

我們先定義好它的 HTML 和 CSS。

<template id="userCardTemplate">
  <style>
    :host {
      display: flex;
      align-items: center;
      // 省略部分代碼...
    }
    // 省略很多的CSS 代碼
  </style>

  <img class="image" />
  <div class="container">
    <slot name="name"></slot>
    <slot name="email"></slot>
    <button class="button">Follow Gopal</button>
  </div>
</template>

這里留意幾點(diǎn)：

template 可以理解成普通的 div，只是這個(gè)元素內(nèi)的所有內(nèi)容不會直接展示到界面上。
template 標(biāo)簽中可以直接插入 style 標(biāo)簽在，模板內(nèi)部定義樣式。其中:host? 偽類用來定義shadow-root 的樣式，也就是包裹這個(gè)模板的標(biāo)簽的樣式。
留意占位符。該占位符可以在后期使用自己的標(biāo)記語言填充，后面我們會提到。它的使用跟 Vue 的插槽是一樣的。應(yīng)該說 Vue 借鑒了它的實(shí)現(xiàn)。

Custom elements（自定義元素）

使用 CustomElementRegistry.define() 方法注冊您的新自定義元素，并向其傳遞要定義的元素名稱、指定元素功能的類、以及可選的其所繼承自的元素。

自定義元素的名稱，一個(gè) DOMString 標(biāo)準(zhǔn)的字符串，為了防止自定義元素的沖突，必須是一個(gè)帶短橫線連接的名稱（e.g. custom-tag）。這個(gè)也是 Vue 自定義組件命名推薦的使用方式。
constructor。自定義元素構(gòu)造器，包含組件的生命周期的定義。
擴(kuò)展參數(shù)（可選），該參數(shù)類型為一個(gè)對象，且需要包含 extends 屬性，用于指定創(chuàng)建的元素繼承自哪一個(gè)內(nèi)置元素（e.g. { extends: 'p' }）。

代碼如下：

class UserCard extends HTMLElement {
  constructor() {
    // 必須調(diào)用 super();
    super();
    // 創(chuàng)建一個(gè) shadow 節(jié)點(diǎn)，創(chuàng)建的其他元素應(yīng)附著在該節(jié)點(diǎn)上
    var shadow = this.attachShadow({ mode: "closed" });
    // 獲取到模板實(shí)例
    var templateElem = document.getElementById("userCardTemplate");
    // 進(jìn)行拷貝，因?yàn)轫撁嫔系哪０宀⒉皇且淮涡缘模赡芷渌慕M件也要引用
    var content = templateElem.content.cloneNode(true);
    // this.getAttribute 可以獲取到組件的傳參
    content
      .querySelector("img")
      .setAttribute("src", this.getAttribute("image"));
    // 添加到 shadow dom 中
    shadow.appendChild(content);
  }
}
// 注冊自定義元素
window.customElements.define("user-card", UserCard);

這里需要留意這個(gè)點(diǎn)：

Class 類必須調(diào)用 super()。
獲取到模板之后，需要通過 clone() 方法進(jìn)行拷貝，因?yàn)轫撁嫔系哪０宀⒉皇且淮涡缘模赡芷渌慕M件也要引用。
this.getAttribute 可以獲取到組件的傳參。

定義好之后，我們就可以直接使用 user-card? 這個(gè)自定義元素了，并且可以傳遞屬性給組件，并且能夠通過 slot? 標(biāo)簽指定 name 屬性，使用上面 HTML 模板中我們定義好的占位符。

<user-card
  image="https://p3-passport.byteacctimg.com/img/user-avatar/a0383600d66ccc81b3396b75cf3a95ea~300x300.image"
>
  <p slot="name" class="name">Gopal</p>
  <p slot="email" class="email">1172597655@qq.com</p>
</user-card>

最終的組件效果如下：

Shadow DOM

上面的 Demo 中其實(shí)已經(jīng)使用了，我們可以在任意一個(gè)節(jié)點(diǎn)內(nèi)部創(chuàng)建一個(gè) Shadow DOM?，在獲取元素實(shí)例后，調(diào)用 Element.attachShadow()? 方法，就能將一個(gè)新的 shadow-root 附加到該元素上。

該方法接受一個(gè)對象，且只有一個(gè) mode 屬性，值為 open 或 closed，表示 Shadow DOM 內(nèi)的節(jié)點(diǎn)是否能被外部獲取。

上面我們設(shè)置為 closed。

假如改成 open，結(jié)果如下：

面臨的挑戰(zhàn)

雖然 Web Components 提出來已經(jīng)很久了，但是普及的程度遠(yuǎn)遠(yuǎn)沒有 Vue、React 這些框架的組件庫。其主要的問題是，Vue、React 這些框架幫助我們解決了一些視圖渲染的邏輯，比如 React，使用 JSX 和 Css module，我們只需要關(guān)心數(shù)據(jù)狀態(tài)，不需要像 Web Components 一樣需要更多的關(guān)注 HTML 模板，也就帶來了更多的靈活和便利。

總結(jié)與思考

精讀《Web Components 的困境》[2]的總結(jié)中提到：

Web Components 作為瀏覽器底層特性不應(yīng)該拿出來和 React，vue 這類應(yīng)用層框架相比較。Web Components 的方向以及提供的價(jià)值都不會跟應(yīng)用框架一致。而 Web Components 作為未來的 Web 組件標(biāo)準(zhǔn)，它在任何生態(tài)中都可以運(yùn)行良好。我倒是更加期待應(yīng)用層去基于 Web Components 去做更多的實(shí)現(xiàn)，讓組件超越框架存在，可以在不同技術(shù)棧中使用。

確實(shí) React 和 Web Components 也是可以共存的，React 官方文檔也提到：

為了解決不同的問題而生。Web Components 為可復(fù)用組件提供了強(qiáng)大的封裝，而 React 則提供了聲明式的解決方案，使 DOM 與數(shù)據(jù)保持同步。兩者旨在互補(bǔ)。作為開發(fā)人員，可以自由選擇在 Web Components 中使用 React，或者在 React 中使用 Web Components，或者兩者共存。

至于應(yīng)用層去基于 Web Components 去做更多的實(shí)現(xiàn)，我覺得這是一個(gè)很理想的狀態(tài)，畢竟要 React、Vue 基于 Web Components 去封裝它們的實(shí)現(xiàn)，那就需要 Web Components 做更多靈活的規(guī)范和標(biāo)準(zhǔn)，期待這一天的到來吧。