Web Components 现状及发展趋势

笔者之前参与过两个低代码项目，大屏编辑器，图表编辑器。其表现形式均为通过拖拽和配置表单来编排物料，进而生成交付产物。其中物料的丰富程度、可复用程度又是重中之重。如果物料本身依赖某一种框架，比如React或Vue在大时间跨度下必然会产生迁移成本。届时面对海量的待升级的基础物料，如何迁移就会变成一个非常麻烦的问题。

Web Components提出了一种无需任何库或框架即可运行的组件化方案。用于将物料解耦具体前端框架十分合适。本文尝试从Web Components的发展历史、现状、优缺、趋势等方面尝试判断现在是否合适将已有的物料迁移至Web Components。

历史

2011年：Google发布了Chrome浏览器，并提出了“Shadow DOM”概念，这是Web Components的一个重要组成部分。
2013年：谷歌工程师Alex Komoroske在Google I/O大会上首次提出了Web Components的概念，并推动了相关标准的制定。
2014年：W3C发布了Web Components的规范草案，其中包括四个主要技术：Custom Elements、Shadow DOM、HTML Templates和HTML Imports。
2015年：Web Components的规范逐渐得到浏览器厂商的支持，Chrome、Firefox、Safari等主流浏览器开始逐步实现相关功能。
2018年：Web Components逐渐成为前端开发的主流技术之一，越来越多的开发者开始使用Web Components来构建可重用的组件。
2019年：工具链改进： 出现了更多的工具和库，帮助开发者更高效地创建、测试和部署Web Components。跨平台应用： Web Components开始被更广泛地用于构建跨平台应用，如混合移动应用和桌面应用。
2020年： 标准化进程： Web Components相关规范持续演进，更多功能被纳入标准，使得Web Components更加强大和灵活。组件库流行： 出现了更多优秀的Web Components组件库，帮助开发者快速搭建复杂的界面。
2021年： 组件化趋势： Web Components的组件化思想逐渐被更多开发者接受，成为前端开发的主流范式之一。性能优化： 开发者开始更注重Web Components的性能优化，提升页面加载速度和交互体验。
2022年： 生态繁荣： Web Components生态系统持续繁荣，社区贡献的组件和工具不断增加，为开发者提供更多选择和支持。微前端集成： Web Components被广泛用于微前端架构中，帮助不同团队更好地独立开发和部署各自的功能模块。
2023年： 跨框架兼容： Web Components在跨不同前端框架的兼容性得到进一步改善，使得不同技术栈的开发者能够更加灵活地使用Web Components。安全性提升： 开发者开始更注重Web Components的安全性，采取更多措施防止潜在的安全漏洞。

现状

截止2024年Q1:

Github web-components话题下有2,135个开源repo。react下有352,937 。vue下有 54,504个。

stackoverflow web-componentTag下有 3,749 个问题。 reactjs下有 476,931 个。vue.js下有107,421个。

从以上数据可以得出截止目前 Web Components和目前的主流框架在社区的丰富程度和流行度上仍有数量级的差距。

优缺

优点：

原生支持
性能优势
无排他性：在 React，Angular，Vue 中使用他们
无依赖性：而无需将框架的依赖项导入到项目中

缺点：

生态仍不够成熟
基于Web Components使用起来痛点较多

痛点：

组件内部事件的回调：比如，一个弹窗组件（<my-dialog></my-dialog>）中的确定按钮，那么它的事件是如何触发的呢？

现在方案是 custom element 内部自定义事件 new CustomEvent()，外部用 addEventListener监听。这样的写法是很丑陋的，仿佛又回到了原生 JS 写应用的时代。
组件样式覆盖：对于开发者来说，难免会遇到需要调整组件内部样式的时候。无论你是使用antd、vant还是使用其它组件库，但 WCs 的 CSS 防污染机制导致你很难修改内部样式。

这需要你付出一些代价来变相的修改内部样式，其实是很繁琐，且不符合开发者直觉的。
组件内部资源相对路径问题：就目前来说，任何直接基于 Custom Element v1, Template 和 HTML Import 的组件都无法做到完全资源独立。
form表单类组件 value 获取问题：Shadow DOM 中包含有 <input>、<textarea> 或 <select> 等标签的 value 不会在 form 表单中自动关联。提交的时候无法获取 input-age 的 value。当然会有解决方案，但会很复杂。
生命周期方法不够丰富
参数传递方式不够优雅

趋势

鉴于目前原生的Web Components使用起来含有较多痛点。社区有几种趋势：

构建基于Web Components的框架来解决一些使用上的痛点问题例如：Hello, slim.js! (slimjs.com)，Polymer library - Polymer Project (polymer-project.org)等。
基于各大Web框架构建类似于“防腐层”的中间层。生成基于 Web Components的组件将其通用化。
基于纯原生Web Components

其中1有背Web Components的初衷，2仍需要构建且包含各大框架的runtime，3目前执行起来痛点过多几乎很少有人尝试。

总结

回到最初的问题：现在是否合适将已有的物料迁移至Web Components？

结论是：可以进行一些知识、技术储备。进行一些技术性验证。在场景合适的时候做一些技术验证。不建议上生产环境。

参考 & 引用

前端 - Web Components实践：如何搭建一个框架无关的AI组件库 - 京东云技术新知 - SegmentFault 思否

Things you forgot (or never knew) because of React - Josh Collinsworth blog