Web组件(英語:Web Components)是W3C正在向HTMLDOM规范添加的一套功能[1],它允许在Web文档和Web应用程序中创建可重用的小部件英语Web Widget或组件。这样做的目的是将基于组件的软件工程引入万维网[來源請求]组件模型将允许单个HTML元素的封裝互操作性

Web组件由四大部分组成,可单独或组合使用。

  • 自定义元素 - 定义新HTML元素的API
  • 影子DOM - 封装的DOM和样式,配以组合化
  • HTML导入 - 将HTML文档导入其他文档的声明方法
  • HTML模板 - <template>元素页面存档备份,存于互联网档案馆),允许文档包含惰性的DOM块

浏览器

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). 

外部链接