也许Web Components并非未来？

组件 !== Web 组件

DOM 生命周期

那我们该何去何从？

我知道你们肯定在想，这又是一篇关于Web组件支持者和反对者之间争论的文章。我只是觉得，这种讨论往往偏离了更根本的问题。

先介绍一下背景。我在生产环境中使用 Web Components 已有 7 年了。我开发过基于 Web Components 的库，也为 Shadow DOM 编写过不少 polyfill，并且一直以来都是 Web Components 的拥护者。我目前在一家创业公司工作，公司一直在寻找合适的时机，从 MVP 应用过渡到更完善的版本。过去两年，我一直坚信我们会继续使用 Web Components，并且随着浏览器逐渐完善标准，我们最终会迎来开发的最佳时机。然而，时机到来时，尽管我们一开始使用了 Web Components，但它们的作用很快就被削弱，最终被完全移除。

所以我想强调的是，我这么说并非出于“我们与他们”的对立心态，而是因为我过去几年所学到的东西极大地改变了我的看法。我不会着重讨论一些人眼中的管理不善或供应商之间的分歧。事实上，我认为这些都不是解决问题的正确方法。或者说，是目前呈现的问题本身存在问题。

组件 !== Web 组件

Web Components 由一系列标准（自定义元素、HTML 模板、Shadow DOM 以及之前的 HTML Imports）组成，表面上看似乎可以用来替代你常用的库或框架。但它们并非高级模板解决方案，也不会提升你渲染或更新 DOM 的能力，更不会帮你处理状态管理等更高层次的问题。

曾经有人试图扩展标准，使其更像一个库。我认为现在大家都明白，这并非明智之举。这里意见太多，过于雄心勃勃只会适得其反。考虑到 Shadow DOM，我认为即使是当前的标准也过于雄心勃勃。然而，Shadow DOM 解决了样式隔离和插入（插槽）子元素这两个关键问题。

因此，现在的讨论方向已经不再是“抛弃框架，使用平台”。Web Components 反而加剧了生态系统的碎片化，因为它们提供的工具刚好够任何想成为库开发者的人使用。我自己就是其中之一。你仍然需要处理许多库相关的问题，最终每个组件库都需要自带 JavaScript 代码。要么是自包含的，但由于重复代码而导致体积增大；要么你仍然需要导入 JavaScript 库。总之，这其中存在着一定的投入。

然而，这些事实仍然与“将 Web Components 与你最喜欢的库一起使用”这种新论调不太相符。除了最简单的 Web Components 之外，其他所有 Web Components 都会增加 JS 包的大小、性能损失和新的复杂性。

DOM 生命周期

与 UI 库和框架之间存在摩擦并不令人意外。像 Svelte 或 Vue 这样曾经非常支持 Web Components 的库，如今也已有所退缩。Web Components 目前面临的最大问题是 JS 库生态系统已经发展壮大。在很多情况下，这不再仅仅是渐进增强的问题。要创造用户体验或开发体验（例如应用程序的体验），需要更全面地考虑问题。现代 JS 库的生命周期超越了 DOM 生命周期。组件在渲染之前就已经存在，并且它们希望对诸如子组件的插入等操作拥有绝对的控制权。

问题在于，当元素被添加到 DOM 时，一切都为时已晚。你已经付出了代价。当库使用虚拟 DOM 表示，甚至是内存树时，这种限制就非常明显。库中经常会延迟执行插槽或事件props.children。像 Suspense 或窗口机制（只绘制屏幕上的内容）这样的技术都不希望在渲染时承受性能损耗。当然，你可以将状态从 Web 组件中提升出来，不再依赖回调函数，但这并不自然。这一切都不是 Web 组件的错。它们本质上是基于 DOM 构建的，并且依赖于 DOM。这就是我们处理的事件和接口。

组件的异步时序（包括升级和回调）对于同步渲染的库来说也很麻烦。这会导致传递 Context API 等操作变得困难。当然，Web 组件可以拥有自己的依赖注入系统，但要按预期使用库可能会很困难。每个 Web 组件都是一个孤岛。虽然它们封装且模块化，但如果大量使用，它们就像一道需要我们不断跨越的边界。

那我们该何去何从？

我不太确定。渐进增强<a is="my-button" />、第三方组件和微前端之类的方案看起来都挺合理。我仍然会使用 Web Components 来替代打包 JS SDK，或者作为一种将开发隔离在单个页面上的合理方法。

但 Web Components 究竟是作为框架使用，还是作为在我所选框架内增强应用程序的一种方式？这很难说。虽然我不喜欢不断重复造轮子，但想到在我所选框架内实现的版本会更小、更快、更一致，这种感觉总是挥之不去。当库不断突破 Web 应用程序体验的界限，而这些突破似乎并非必要时，所谓的“面向未来”的希望就无法得到保证了。我很乐意为平台的未来贡献力量，但我不再确信这就是它的未来了。

问题不在于 Web Components 本身没有达到预期目的。即使它们在某些方面存在问题，但大多数问题都可以解决。问题归根结底在于它们的本质。它们还能是什么呢？它们只是 DOM 元素而已。问题在于，它们或许并不是解决问题的合适抽象方式。