今天我们来聊一聊 `Web Components`，笔者一直相信 `存在即合理`。下面来说说我接触 Web Components 的背景：我司是做跨境电商的，C端站点是基于三方的SaaS电商服务平台，后期代码全部通过该平台进行维护。由于公司快速发展，该平台已经限制了我们业务发展的边界，无法满足日益定制化的需求，搭建自己的系统不可或缺。直接全量切自研系统不太现实，所以我们按业务模块通过不断迭代逐个替换。目前我们采取的方案是：使用 webpack + vue全家桶打包成 `MPA` 项目，将打包好的模块引入到三方平台，说白点就是把打包后推到 CDN 上的 js 和 css 引入到三方平台挂载到指定 `DOM` 上。但是这里有个问题，由于三方平台里面的代码质量问题，原有的样式会影响到我们自建模块里面的样式，每次本地开发完成，核对一遍 UI 没问题，但是一旦代码加入到三方平台，各种样式问题就找来了, 除非再核对一遍 UI，那么工作量直接double；还有就是多站点代码迁移，由于每个站的样式覆盖代码不同，还得针对每个站的覆盖情况进行重置，导致 UED 和我们都很痛苦。想到了两种解决方案： 1. `iframe` ，天然的`沙箱`，但存在几个问题，就是如何解决iframe的`高度自适应`的问题，以及如何解决两个系统`数据高度依赖`的问题，所以只能进入待定区。 2. `Web Components` 里面有个叫 `Shadow DOM` 的东西，也是一个天然的 `DOM` 和 `样式`的沙箱。说了这么多总算把背景说完了，下面进入正题。 ## 让我们带着问题进入今天的学习 1. 离开vue、react、angular，你怎么实现组件化？ 2. 为什么要组件化？ 3. 组件化的优点和特征有哪些？ 4. 为什么说 Web Components 可以实现跨框架的组件开发？ ## 基础知识 ### 特征： - 非侵入 - 无依赖 - 纯原生 ### 三大技术套件 - Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。 - Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而**不用担心与文档的其他部分发生冲突**。 - HTML templates（HTML模板）：[`