Web 组件究竟有何优势，我为何要采用？ _Web

【CSDN 编者按】该文章主要探讨了 Web 组件的优缺点以及适用场景。作者认为 Web 组件在 DOM 树叶子节点、设计系统和企业级应用中表现出色，但也指出了其在服务器端渲染和可访问性方面的不足。文章强调，Web 组件不是一种全能的解决方案，而是应在其擅长的领域中得以应用。
原文链接：https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/
作者 | Nolan Lawson译者| 明明如月
责编 | 夏萌
出品 | CSDN（ID：CSDNnews）

文章插图
近期，Dave Rupert 的文章《 Web 组件究竟有何优势，我为何未采用？》引发了广泛讨论。作为一个拥有多年 Web 组件使用经验的开发者，我想分享一下自己的看法。
在分析问题之前，我想先给出一个典型的“资深工程师”的看法：是否应该使用 Web 组件取决于具体场景的需要。现在，让我们首先探究 Web 组件在哪些场景表现更出色，然后再分析其存在的局限性。
DOM 树中的叶子节点
在我看来，Web 组件特别适用于 DOM 树中的叶子节点，也就是那些不需要服务器端渲染（SSR）和没有内嵌内容的组件。具体而言，如富文本编辑器、日历插件和颜色选择器等。
在此场景中，一些常见于 Web 组件的挑战，如服务器端渲染（SSR）、hydration、插槽（slotting），或甚至是 Shadow DOM，都不再是问题。如果你不使用框架，或者使用一个支持 Web 组件的框架，你只需要把 <fancy-component>标签放到你的模板或 JSX 中就可以了。
以我的 emoji-picker-element 组件为例，仅需一行 html 代码即可导入：
< type="module" href=https://www.isolves.com/it/cxkf/bk/2023-09-05/"https://cdn.jsdelivr.NET/npm/emoji-picker-element@1/index.js">用法也非常简洁：
<emoji-picker></emoji-picker>

文章插图
emoji-picker-element 组件效果截图
这样，无需依赖打包工具、转译器或特定框架，简单复制粘贴即可。这不仅适用于小型项目，也已成功应用在复杂的单页应用（SPA）中，这也体现了 Web 组件的广泛适用性。
这完全符合 Web 组件的设计初衷：使自定义 Web 组件的使用与内置 HTML 元素一样简单。
适配代码：一种避免全量重构的策略
设想这样一个场景：你手头有一个庞大的 React 项目，它已经稳定运行了相当长的时间。现在，团队计划转向 Svelte 。这是否意味着你必须从头到尾重构代码库，并且还需要为每一个第三方组件找到其 Svelte 版本？
前端开发者在考虑从一个框架迁移到另一个框架时，通常会担心巨大的迁移成本。然而，最大的误区则是将 Web 组件也看作是与此相似的问题。
实际上，Web 组件的核心价值在于解决这种框架依赖性带来的问题。如果你打算从 Vue 切换到 Lit，或从 Angular 切换到 Stencil，而且还计划一次性重构所有组件，那么你无疑是在给自己制造麻烦。
更合理的做法是允许新旧代码并存，并用 Web 组件作为中间层，实现两者的无缝对接。这样，你就无需一次性全面重构代码：
<old-component> <new-component> </new-component> </old-component>Web 组件能够进行属性（props）传递和事件（events）触发，这基本上覆盖了它们的核心功能。如果你使用的框架支持 Web 组件，这一切都是开箱即用的。即使不支持，你也可以通过编写轻量级的适配代码来实现。
虽然有人可能对一个页面上混用多个框架有所保留，但这种担忧更多地是基于直觉而非实证数据。如果你使用的是元框架进行服务器端渲染（SSR）和客户端数据注入（hydration），那么部分迁移的操作可能比预期更为复杂。但 Web 组件的一大优势就是能在客户端明确规定如何将两个组件组合在一起。
因此，如果你和你的团队不想再频繁进行全面的代码重构，那么使用 Web 组件可能是一个好的选择。
设计系统与企业应用
如果观看了 Cassondra Robert 在 css Day 上的精彩讲解，你会发现一个展示了多个知名企业的 Logo 的页面，这些都是 Web 组件广泛使用的佐证。

文章插图

如果这还不够的话，你还可以参考 Oracle、SAP、ServiceNow 等其他众多企业。

你可能没有意识到，在多数大型企业（例如，我所就职的公司）中，Web 组件已经在其设计系统和组件库中得到了广泛应用。尤其是对于那些常在 Web 开发社区中活动的人来说，这样的现象可能颇为令人惊讶。更令人震惊的是，根据某些统计数据，尽管 React 在网页中的使用率约为 8%，Web 组件的使用率却高达 20% 。