原文地址：http://www.2ality.com/2015/08/web-component-status.html

三年前，Web 组件一度炙手可热，每个人都在讨论它们，Ember 和 Angular 框架准备整合它们，甚至都想基于他们开发了等等。 如今，这些都销声匿迹了。这篇博客探讨 Web 组件发生了什么。剧透: 他们还好好地活着，正逐渐被浏览器所接受。

1. 回顾：什么是 Web 组件

Web 组件是一套规范，有助于实现自定义 HTML 元素：

• 自定义元素：注册自定义 HTML 元素实现的 API
• Shadow DOM：一个内嵌套的文档，封装和隐藏自定义元素的内部细节，是 Web 组件最重要和最难完善的部分
• 模板：一个存储HTML数据的HTML文档。<template> 元素的内容是被解析的，而非解释执行的（比如不会加载图像等）。
• HTML 导入：让你将其他 HTML 文件导入到当前的文件中。这样， HTML 文件就变成了包含 HTML、CSS 和 JavaScript 的文件包。你需要以这种包的形式来发布自定义元素和其所有依赖项。

关于 Web 组件是如何工作的更多信息，你可以阅读 Travis Leithead 和 Arron Eicholz 的文章：“Bringing componentization to the web: An overview of Web Components”。

2. 最新进展

很长一段时间，主要是 Google（和 Mozilla，某种程度上）在推动 Web 组件化。近几个月里，其他组织也参与进来。在2015年4月24日 和 2015年7月21日的两次面对面会议中， Mozilla、 微软、 谷歌、 苹果和其他组织都有人出席。这两次会议期间就两个关于跨浏览器的 Web 组件规范达成了共识。

• Shadow DOM: 现在，对于如何规范 Shadow DOM 已经达成广泛的共识，这自然是极好的，原因正如之前所述，它是最难完善的部分。
• 自定义元素：每个人都同意自定义元素很重要，但确定细节却很困难，尤其是何时激活自定义实现 —— 在 DOM 中创建自定义元素时，还是之后呢？

其他两个规范怎么样了？

• HTML 导入仍有争议，因为与 ES6 模块加载有很多相似的地方。尤其是 Mozilla 和微软认为关于 HTML 导入的下一步工作应等到 ES6 模块加载完成之后再启动。
• 模板并不复杂，并已得到广泛支持。微软 Edge 的状态是“开发中”。

更多信息：

• Anne van Kesteren (2015-07-28)发表的"关于更新 Shadow DOM 和自定义元素的规范"中：（设计自定义元素的症结的高级概述）。
• Wilson 的“Web 组件的状态”（2015-06-09）文章中：一个 Web 组件的规格标准化的状态的全面的概述。

3. Web 组件与 React

当 Sebastian markbage（React 的创造者之一）被问及 Web 组件时，他回答道：

Facebook 不会使用它。我们不会基于它创建 React，因为 Web 组件是命令模式，React 是声明模式，差异很大。Web 组件没有惯用的方式来定义事件的发生。当一切都是字符串时，如何传递数据？我们更多的是把它看成一个中间层，能让各种框架间相互（交谈）。 我在和 Atom 团队的交谈中得知，这一层还不能解决问题，因为它对框架间的关系没有想法。

这听起来像 React 和 Web 组件是互不兼容的。然而，在另一次名为“The complementarity of React and Web Components”的谈话中，Andrew Rota 持不同意见:

• Web 组件在 React 组件树中可以被当作叶子组件使用，就像原生 DOM 元素一样。
• React 对 Web 组件的支持越来越好:
• 自定义元素已经可以用了（不用白名单了，只要把元素名小写，就可以像 DOM 一样被解析）。
• 对自定义属性和自定义事件的支持正在进行中。

Andrew 认为 Web 组件应该:

• 小: 原子，不复合。React 和其他框架可以用于组装 Web 组件。
• 完全封装：例如，Web 组件不应该在嵌入文档中放入<script> 标签。
• 尽可能无状态：避免内部状态，使用事件来传达变更。

这些设计 Web 组件的规则对 React 有利，但也是普适的。

• 在 Web 组件中使用 React 是不明智的，它违背了 Web 尽可能小的原则。

4. 更多信息：

The Web Platform Podcast 第 54 期（2015年7月28日） 访问了一个专家小组:" Web 组件化准备好么?"（80 分钟的视频）。观看该视频以获得更多的关于 Web 组件的信息和内容。 上面的访谈中提到，CSS Houdini工作组的工作有助于在将来实现 Web 组件：

CSS-TAG [技术架构组] Houdini Task Force ( CSS Houdini ) 的目的是共同开发 Web 样式和布局的“神奇”功能。

目前，样式和布局大多数是黑盒的。Houdini 团队计划揭露其内部细节，并让人们参与其中。