你不知道的 Web Components - 现状
内容提要
本文介绍Web Components的现状，涵盖其组成（Custom Elements、Shadow DOM、Templates/Slots）、优缺点、行业应用（如Twitter、YouTube、GitHub、SalesForce等）及生态支持。文章强调其原生、跨框架优势，但存在兼容性和SEO挑战，并比较了不同实现方式的性能与体积，指出基于基础库或构建时编译更优。
延伸解读
Web Components 的采用现状与趋势
文章数据显示，截至2022年，已有17%的网站至少使用一个Custom Elements，而2019年前这一比例几乎为零。这表明Web Components正被快速采纳，且PC端和移动端增长均衡。这一趋势反映了业界对原生、跨框架组件方案的认可，也预示着Web Components在未来的Web开发中将扮演更重要的角色。
实现方式的选择：权衡性能与成本
文章对比了三种实现Web Components的方式：基于基础库开发、运行时封装和构建时编译。运行时封装（如React、Vue2）研发成本最低，但体积和性能表现最差；构建时编译（如Svelte、Stencil）性能接近原生，但需要工具链转换；基于原生或基础库开发性能最优，但现有组件需重写。开发者应根据项目现状和性能需求权衡选择。
兼容性与性能的注意事项
尽管Safari和Chrome已原生支持Web Components，但Firefox、Edge和IE11仍需Polyfill。性能方面，Shadow DOM的创建开销约为普通DOM节点的3倍，但实际页面性能受多种因素影响，且Web Components在渲染时可能优于React等框架。因此，在采用时需评估兼容性处理成本，并理性看待性能测试结果。
Q&A
Web Components 由哪些技术组成？
Web Components 主要包括三部分：Custom Elements（自定义元素）、Shadow DOM（影子 DOM）和 Templates/Slots（模板和插槽）。Custom Elements 提供创建自定义 HTML 元素的 JS API；Shadow DOM 允许将元素的内部结构封装起来，与主文档隔离；Templates 和 Slots 用于灵活复用和动态使用 HTML 片段。
Web Components 有哪些优点和缺点？
优点：原生支持、无三方依赖、使用简单、性能好（真实渲染性能优于 React）、组件隔离、技术栈无关、利于复用和分享。缺点：需要 polyfill 才能覆盖所有主流浏览器（尤其是 IE11 之前的低版本）、SEO 需要额外处理、SSR 方案还不够完善。
哪些知名公司在使用 Web Components？
Twitter、YouTube、EA、GitHub、SalesForce、Oracle 等公司都在使用 Web Components。Twitter 用 Shadow DOM 优化嵌入式推文；YouTube 用 Polymer 重构全站；EA 基于 Web Components 构建设计系统；GitHub 从 2014 年开始关注并广泛使用；SalesForce 用 LWC 提供统一组件库；Oracle 在 JET 中支持 Custom Elements。
Web Components 有哪些主流的基础库或框架？
主流的基础库包括 Google 的 Polymer/Lit、Ionic 团队的 Stencil、微软的 FAST、以及 hybrids 等。Polymer 是较早的库，Lit 是其现代化替代品；Stencil 是编译器，可生成 Web Components；FAST 是微软的标准化解决方案；hybrids 使用纯函数和对象创建组件。
Web Components 的实现方式有哪几种？各自的优缺点是什么？
实现方式有三种：基于基础库开发、运行时封装、构建时编译。基于基础库开发（如 Lit）体积小、性能好，但现有组件需要重写；运行时封装（如 React 的 react-to-webcomponent）研发成本低，但体积大、性能差；构建时编译（如 Svelte、Stencil）性能接近原生，体积略大，但需要工具链转换成本。
Web Components 的浏览器兼容性如何？
Safari 和 Chrome 已原生支持 Web Components 规范。Firefox、Edge 和 IE11 在 Polyfill 的支持下也能很好地支持。
Web Components 的性能表现如何？
Shadow DOM 的创建开销比普通 DOM 节点大约 3 倍，但 Web Components 的真实渲染性能优于 React，因为 Custom Element 的 upgrade 机制和 HTML Templates 可以延迟执行，而 React 需要处理 JSX 解析、虚拟 DOM 比较等，CPU 成本更高。
Web Components 的采用率如何？
根据 Chrome 数据，目前有 17% 的网站至少使用一个 Custom Elements，而 2019 年之前几乎为 0。PC 和移动端使用率没有明显差异，增长迅速。
