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

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

瀏覽器

Google ChromeMozilla FirefoxMicrosoft EdgeSafariOpera已支援HTML模板。[2]

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

對舊版瀏覽器的向下相容性可以使用基於JavaScriptpolyfill英語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]

參考資料

  1. ^ Web Components Current Status - W3C. [2017-09-11]. (原始內容存檔於2019-03-01). 
  2. ^ Can I use... Support tables for HTML5, CSS3, etc. [2017-09-11]. (原始內容存檔於2022-01-31). 
  3. ^ What's New in Safari. Apple Inc. [21 June 2016]. (原始內容存檔於2017-01-26). 
  4. ^ Are We Componentized Yet?. [2017-09-11]. (原始內容存檔於2022-03-15). 
  5. ^ Web Components in production use – are we there yet?. [2016-11-21]. (原始內容存檔於2017-08-30) (美國英語). 
  6. ^ Web Components and Model Driven Views by Alex Russell · Fronteers. [2016-12-02]. (原始內容存檔於2022-04-17). 
  7. ^ The state of Web Components ★ Mozilla Hacks – the Web developer blog. [2016-12-02]. (原始內容存檔於2022-05-13). 

外部連結