Web組件

歷史Alex Russell在2011年的Fronteers大會上首次提出Web組件。Google在2013年發佈了一個基於Web組件的程序庫“Polymer”。 ^[2] 

封裝性在面向對象編程方法中，封裝是指，一種將抽象性函數接口的實現細節部分包裝、隱藏起來的方法。同時，它也是一種防止外界調用端，去訪問對象內部實現細節的手段，這個手段是由編程語言本身來提供的。這兩個概念有一些不同，但通常被混合使用。封裝被視為是面向對象的四項原則之一。適當的封裝，可以將對象使用接口的程序實現部分隱藏起來，不讓用户看到，同時確保用户無法任意更改對象內部的重要數據。它可以讓代碼更容易理解與維護，也加強了代碼的安全性。 ^[2] 

互操作性互操作性作為一種特性，它指的是不同的系統和組織機構之間相互合作，協同工作（即互操作）的能力。技術系統工程設計（technical systems engineering）方面常常會用到這條術語；另外，廣義地説，還會考慮到那些影響系統間性能（system to system performance）的社會、政治和組織機構因素。另外，Interop還是幾個年度網絡產品貿易展覽會的名稱（英文：annual networking product trade shows）。 ^[2] 

Web組件由四大部分組成，可單獨或組合使用。

Custom element（自定義元素）一組 JavaScript API，允許定義 custom elements 及其行為，然後可以在用户界面中按照需要使用它們。

Shadow DOM（影子 DOM）：一組 JavaScript API，用於將封裝的“影子”DOM 樹附加到元素（與主文檔 DOM 分開呈現）並控制其關聯的功能。通過這種方式，可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔心與文檔的其他部分發生衝突。

HTML template（HTML模板）： <template> 和 <slot> 元素可以編寫不在呈現頁面中顯示的標記模板。然後它們可以作為自定義元素結構的基礎被多次重用。 ^[3] 

自定義元素，定義新HTML元素的API。元素，允許文檔包含惰性的DOM塊 ^[1]  瀏覽器Google Chrome、Mozilla Firefox、Microsoft Edge、Safari和Opera已支持HTML模板。

影子DOM，封裝的DOM和樣式，配以組合化。自定義元素和影子DOM的一個早期版本（稱為v0）已在某些基於Blink的瀏覽器（例如Google Chrome和Opera）以及Mozilla Firefox（需要手動修改配置）中支持。較新版的自定義元素和影子DOM（v1）API正在Safari10、Google Chrome (53.0.2785)以及Mozilla Firefox中開發。Microsoft Edge尚未開始實現自定義元素和影子DOM。對舊版瀏覽器的向後兼容性可以使用基於JavaScript的polyfill實現。 ^[1] 

HTML導入，將HTML文檔導入其他文檔的聲明方法，HTML模板程序庫已有多個程序庫在創建自定義元素時基於Web組件以提高抽象度。幾個比較為人熟知的是：X-Tag、Slim.js、Polymer和Bosonic。其中的Bosonic和Polymer提供可免費使用的現成組件。這些組件可交替使用，因為它們都基於開放的Web技術。 ^[1]