Web組件
Web組件（英語：Web Components）是W3C正在向HTML和DOM規範添加的一套功能[1]，它允許在Web文檔和Web應用程序中創建可重用的小部件或組件。這樣做的目的是將基於組件的軟件工程引入萬維網。[來源請求]組件模型將允許單個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實現。
程序庫
[編輯]已有多個程序庫在創建自定義元素時基於Web組件以提高抽象度。幾個比較為人熟知的是：X-Tag （頁面存檔備份，存於網際網路檔案館）、Slim.js、Polymer和Bosonic。
其中的Bosonic和Polymer提供可免費使用的現成組件。這些組件可交替使用，因為它們都基於開放的Web技術。[5][需要解釋]
歷史
[編輯]Alex Russell在2011年的Fronteers大會上首次提出Web組件。[6]
Google在2013年發布了一個基於Web組件的程序庫「Polymer」。[7]
參考資料
[編輯]- ^ Web Components Current Status - W3C. [2017-09-11]. （原始內容存檔於2019-03-01）.
- ^ Can I use... Support tables for HTML5, CSS3, etc. [2017-09-11]. （原始內容存檔於2022-01-31）.
- ^ What's New in Safari. Apple Inc. [21 June 2016]. （原始內容存檔於2017-01-26）.
- ^ Are We Componentized Yet?. [2017-09-11]. （原始內容存檔於2022-03-15）.
- ^ Web Components in production use – are we there yet?. [2016-11-21]. （原始內容存檔於2017-08-30） （美國英語）.
- ^ Web Components and Model Driven Views by Alex Russell · Fronteers. [2016-12-02]. （原始內容存檔於2022-04-17）.
- ^ The state of Web Components ★ Mozilla Hacks – the Web developer blog. [2016-12-02]. （原始內容存檔於2022-05-13）.