HTML Web 组件

我想“Web 组件”中的“组件”一词让很多人感到疑惑 —— 至少对于曾经的我。

“Web 组件”像是类似于 “React 组件”。JSX 有一个 <MyComponent> 组件，而 web 有 <my-component> 组件。 

但是，当你尝试以构建 React 组件的方式构建 web 组件时，很容易感到沮丧并放弃，因为 web 组件的工作方式与 React 组件不同——我放弃过几次。

React 组件的粒度不是 web 组件的粒度。它们的设计优先考虑不同的功能和使用形式。如果你试着像使用另一种一样使用它们，你会与它们的天然颗粒度的方向作斗争。

Web 组件有自己的颗粒度，它更倾向于增强而非替换。我说这个是什么意思？

典型的 React 组件可能如下所示

<UserAvatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
/>

你可以以类似的方式编写 web 组件，比如

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
></user-avatar>

但 web 组件（在浏览器中）的独特功能是，它们可以在 JavaScript 之前进行渲染。React 组件无法做到这一点。

web 组件的这一特性鼓励了可组合性的设计。相比于空  “shell 组件” 获取数据并（独占式使用 JavaScript）渲染其全部内容，web 组件鼓励使用 HTML 编写核心内容，然后将其封装在一个自定义元素中，从而通过附加功能增强其内容。

<user-avatar>
  <img src="https://example.com/path/to/img.jpg" alt="..." />
</user-avatar>

这种特定的组件化风格就是 Jeremy 所说的 “HTML Web 组件”：

如果你的自定义元素为空，那么它不是 HTM web 组件。不过你使用自定义元素来扩展现有的标签，它就是一个 HTML web 组件。

React 鼓励了一种替代的心态：“忘记了浏览器可以做什么；改为在 React 组件中做所有事情，即使你正在重新发明轮子。”

HTML web 组件鼓励增强的心态。

“HTML web 组件"这一术语，与 “JavaScript web 组件”形成对比，后者是一个空元素，其功能和内容完全依赖于 JavaScript。

根据我前面的例子，这将是一个 JavaScript web 组件：

<user-avatar
  src="https://example.com/path/to/img.jpg"
  alt="..."
></user-avatar>

它完全依赖于 JavaScript 的存在，对于没有 JavaScript 的最终用户来说毫无意义。

而这将是一个 HTML web 组件：

<user-avatar>
  <img src="https://example.com/path/to/img.jpg" alt="..." />
</user-avatar>

它在没有 JavaScript 的情况下具有意义和内容，然后通过它的存在而得到增强。

这种扩展/增强而非替代的想法很有趣。

在 Web 上，从长远来看，增强技术获胜

增强方法在 web 上效果最好，因为1）网络的粒度鼓励增强以提高弹性，2）这确实是迭代更改像 web 这样大的东西的最佳方式。

最终，所有与 web 相邻的框架的最佳想法都被纳入到平台中，以增强现有技术的方式工作，而不是大规模取代它。

XHTML 想取代 HTML4，但 HTML5 想增强它。HTML5 赢了。

网络库想要取代 XMLHttpRequest，他们的最佳想法最终被移植到了 fetch 标准中——如今，fetch 标准不仅仅存在于浏览器中！

Sass 和 jQuery 的最佳想法被移植到浏览器中。

Typescript 最好的想法是使用浏览器，但在某种程度上可以增强而不是取代现有的内容。

对于 web 组件，您甚至可以说 React 的组件模型正在移植到浏览器中。但这是以一种有效的方式来增强网络的工作方式，而不是取代它。

我的结论是：如果你想延长寿命，选择增强和增强的技术方法，而不是替换。web 的颗粒度沿该方向排列。