哈囉前端 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 標籤，它不會干擾其它標籤樣式。
下面我們來看下更具象的組件代碼：
目前組件的內容是寫死的，該怎麼動態生成 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 的調用。
微前端
微前端的幾個基本要素：技術棧無關、應用隔離、獨立開發。目前 Web Components 都符合，理論上用 Web Components 做微前端也是可行的。
四、
做點什麼
既然我們知道了 WCs 這麼牛逼，那我們能用它來爲咱們業務做點什麼呢？
🍉🍉🍉 小故事一則：
在 9 月初，我們團隊在和其他團隊共建 Vue 組件庫，當時正好我們的產品經理提出要重構訂單，會涉及到 React、Vue 兩個技術棧的多個工程。
因此我們萌生了尋找一套能夠跨技術棧的組件解決方案，在 9 月份的時候，我們組一邊在共建 Vue 2.x 組件庫、一邊在探索跨技術組件的可能性。
在經過不斷探索後，我們利用業務開發 Buffer 時間，沉澱了一套基於 Web Components 技術的跨技術棧組件庫！
下面向大家隆重介紹，我們的作品 Quark。
目前爲止，Quark 已經可以承受住 40w+ pv 工程，且監控數據表明運行情況良好。
【體積小】比輕更輕，Quark cdn 總包大小爲 20k！
【跨技術棧】支持 Vue、React、Angular 等各類框架 / 無框架
【質量高】19+ 高質量組件
【按需加載】支持按需引用
【文檔全】詳盡的文檔和示例
【單測】單元測試覆蓋
【TS】支持 TypeScript
【SSR】支持服務端渲染
【主題】支持定製主題
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/7dc1-Eeb1d1Z93yYiDTe6w