前言
如果我們選擇不使用任何框架的情況下來進行前端開發，那麼針對一個完整的網頁，我們需要開發以下程式碼：
- 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 的出現可以說是前端技術發展的必然結果，而我們需要做的就是想辦法善用它為自己服務。
~
~ 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
本作品採用《CC 協議》，轉載必須註明作者和本文連結