前言
如果我們選擇不使用任何框架的情況下來進行前端開發，那麼針對一個完整的網頁，我們需要開發以下代碼：
- HTML 代碼
- CSS 代碼
- JavaScript 代碼
就幾年之前來説，HTML 部分的代碼基本不存在複用的可能，這就導致我們可能需要開發大量重複的 HTML 代碼，即使使用 CV 法，代碼的冗餘卻是不可避免的。
Web Components 誕生的背景
近幾年，我們在使用前端框架（比如 Vue）時，都知道有個“組件”的概念，通過使用組件可以提高代碼複用率，一次創建多處使用，在一定程度上簡化了開發流程。
既然組件化開發這麼流行，又能給開發帶來極大的便利，那麼瀏覽器就當然有理由來原生支持組件化，Web Components 就應運而生，它的誕生使得瀏覽器有了原生支持組件化的能力。
Web Components 的概念
何為 Web Components ？顧名思義，就是“網頁組件”，引用 MDN 上的話來説就是：
Web Components 是一套不同的技術，允許您創建可重用的定製元素（它們的功能封裝在您的代碼之外）並且在您的web 應用中使用它們。
注意其中的關鍵詞：可重用、定製，這也是我們樂於使用第三方框架中組件功能的理由。
Web Components 的組成
Web Components不是單一的規範，而是一系列的技術組成，包括Custom Element、Shadow DOM、HTML templates 三種技術規範。它們可以一起使用來創建封裝功能的定製元素，可以在你喜歡的任何地方重用，不必擔心代碼衝突。
Custom elements（自定義元素）
一組JavaScript API，允許您定義custom elements及其行為，然後可以在您的用户界面中按照需要使用它們。
Shadow DOM（影子DOM）
一組JavaScript API，用於將封裝的“影子”DOM樹附加到元素（與主文檔DOM分開呈現）並控制其關聯的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔心與文檔的其他部分發生衝突。
HTML templates（HTML模板）
<templete> 和 <slot> 元素使您可以編寫不在呈現頁面中顯示的標記模板。然後它們可以作為自定義元素結構的基礎被多次重用。
Web Components 的兼容性
兼容性是檢驗一項技術能否用於生產環境的標準，我們來看一下 Web Components 各項技術的兼容性：
通過上圖可以看到，Web Components 在主流瀏覽器上的支持已經極其良好，如果對向下兼容要求不嚴格的話，完全可以在生產環境中使用了。
總結
技術的發展總是以“提供便利”為方向的，Web Components 的出現可以説是前端技術發展的必然結果，而我們需要做的就是想辦法善用它為自己服務。
~
~ 本文完，感謝閲讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
