Web組件

Web組件（英語：Web Components）是W3C正在向HTML和DOM規範添加的一套功能^[1]，它允許在Web文件和Web應用程式中建立可重用的小部件（英語：Web Widget）或組件。這樣做的目的是將基於組件的軟體工程引入全球資訊網。^{[來源請求]}組件模型將允許單個HTML元素的封裝和互操作性。

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

• 自訂元素 - 定義新HTML元素的API
• 影子DOM - 封裝的DOM和樣式，配以組合化
• HTML匯入 - 將HTML文件匯入其他文件的聲明方法
• HTML模板 - <template>元素 （頁面存檔備份，存於網際網路檔案館），允許文件包含惰性的DOM塊

瀏覽器

Google Chrome、Mozilla Firefox、Microsoft Edge、Safari和Opera已支援HTML模板。^[2]

自訂元素和影子DOM的一個早期版本（稱為v0）已在某些基於Blink的瀏覽器（例如Google Chrome和Opera）以及Mozilla Firefox（需要手動修改組態）中支援。較新版的自訂元素和影子DOM（v1）API正在Safari 10^[3]、Google Chrome (53.0.2785)以及Mozilla Firefox中開發。Microsoft Edge尚未開始實現自訂元素和影子DOM。^[4]

對舊版瀏覽器的向下相容性可以使用基於JavaScript的polyfill（英語：polyfill）實現。

程式庫

已有多個程式庫在建立自訂元素時基於Web組件以提高抽象度。幾個比較為人熟知的是：X-Tag （頁面存檔備份，存於網際網路檔案館）、Slim.js、Polymer（英語：Polymer (library)）和Bosonic。

其中的Bosonic和Polymer提供可免費使用的現成組件。這些組件可交替使用，因為它們都基於開放的Web技術。^{[5][需要解釋]}

歷史

Alex Russell在2011年的Fronteers大會上首次提出Web組件。^[6]

Google在2013年發布了一個基於Web組件的程式庫「Polymer」。^[7]