w3ctech

Web 组件发生了什么?(译)

原文地址: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 的状态是“开发中”。

更多信息:

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 团队计划揭露其内部细节,并让人们参与其中。

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复