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]

参考资料

1. . [2017-09-11]. （原始内容存档于2019-03-01）. 
2. . [2017-09-11]. （原始内容存档于2022-01-31）. 
3. . Apple Inc. [21 June 2016]. （原始内容存档于2017-01-26）. 
4. . [2017-09-11]. （原始内容存档于2022-03-15）. 
5. . [2016-11-21]. （原始内容存档于2017-08-30） （美国英语）. 
6. . [2016-12-02]. （原始内容存档于2022-04-17）. 
7. . [2016-12-02]. （原始内容存档于2022-05-13）. 

外部链接

• Webcomponents.org （页面存档备份，存于互联网档案馆）
• slim.js library （页面存档备份，存于互联网档案馆）