哈囉前端Web Components最佳實踐

前言

通過本文，您將瞭解什麼是Web components，以及如何將其落地到業務場景的最佳實踐。

一、初識（什麼是Web components）

在 html5 提供的video元件實現上採用了Shadow DOM技術，Shadow DOM 技術是Web Components 核心套件之一，還有像input、select 也都採用了這個技術，具體什麼是Shadow DOM 會在下文中給出解釋。

二、實踐

基於業務，我們先看一個訂單卡片的視覺稿：

用Web Components實現，程式碼展示如下：

這裡涉及到Web Components的三大技術套件

Template: 利用 Template 生成 DOM；
Shadow DOM：利用Shadow DOM 來隔離CSS樣式；
Custom Elements: 利用Custom Elements 來自定義元素，繼承自HTMLElement，HTMLElement 是 DOM API 裡面的一個類，繼承該類就有了html 的常見屬性和 API，利用Custom Elements 來自定義元素；

Template 和 Custom Elements 都比較好理解，那什麼是 Shadow DOM 呢？

你可以簡單理解為Shadow DOM 是一個獨立的沙箱，與其它的DOM元素互不干擾，能天然做到 CSS 的樣式隔離！類似於 Vue 中帶 Scoped 的 style 標籤，它不會干擾其它標籤樣式。

下面我們來看下更具象的 <order-card /> 元件程式碼：

目前元件的內容是寫死的，該怎麼動態生成DOM呢？我們繼續往下看：

答案就是藉助 Web Components 元件的生命週期來做，其中 connectedCallback 就是 dom 節點首次掛載呼叫，且只會呼叫一次，在這裡可以拿到外部傳入的屬性。屬性變更會呼叫 attributeChangedCallback, 在這裡可以做 dom 更新相關的事情，這裡不在展開，大家可以自行探索下。

dom 能動態生成了，點選事件怎麼玩？
其實和大家平時寫 Vue 元件、React 元件一樣，在 Vue 中是 @click，在 React 中是 onClick，具體示例可參考下圖：

好了，基本知識點先講到這裡。這就是 Web Components！

三、總結

Web Components 具有如下特點：

其應用場景也比較豐富：

元件庫

舉例：國內已有實踐 WCs 的是 Taro v3 版本，下面是官網截圖：

跨端

舉例：跨端的含義是一套 Web Components 元件既可以跑在 Web 上也可以跑在小程式上，跑在 Web 上，那是 Web Components 天然支援的，跑在小程式上的一個可行的方案可以參考下 Taro 3.x。

其基本原理是在 Taro runtime 提供了一套模擬 DOM & BOM 的 API，React & Vue 最終呼叫的API會被對映到 taro runtime 模擬的那一套 API，然後 Taro runtime 在模擬的API內部做微信小程式相關元件和API的呼叫。目前國內騰訊開源的 omi-mp 就實現跨端，感興趣的可以看一下。