CustomElements —— BakerChen

--- theme: qklhk-chocolate --- ![iShot_2023-08-16_17.22.16.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c99a743d21c4391b5ee8da40caf8088~tplv-k3u1fbpfcp-watermark.image?) ## 前言 > MDN：[Web Component](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components) 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。简单的说，**Web Components 就是使用标准化的原生技术实现可重用的组件化开发模式！** Web Components 并不是新的概念！该规范最早于 2011 年推出！经多 10 多年的发展，这套规范逐渐壮大并被主流浏览器所实现。在国内，我们可能对它并不熟悉甚至会感到陌生，日常开发中我们也很少会遇到它，**那它就不重要了吗？** 回答这个问题之前，先简单列举一些目前较为知名的 Web Components 组件库和框架，以及基于此创建的网站应用程序： * [Stencil](https://stenciljs.com/)：一个专门用于构建 Web Components 的库，可集成于 React、Vue 等 JavaScript 框架（Github 11.8k） * [Lit](https://lit.dev/)：Google 推出的用于构建 Web Components 的库，同时提供响应式状态、作用域样式和声明式模板系统，与 Stencil 相比更像是一个完整的 UI 框架（Github 15.5k） * [FAST](https://www.fast.design/)：微软推出的 Web Component 组件库，同时提供了自定义 Web Components 的方法（Github 8.5k） * [YouTube](https://www.youtube.com/)：打开控制台，您会发现大量的自定义元素！ * [Photoshop网页版](https://photoshop.adobe.com)：对！您没看错！这就是 Adobe 使用 Lit 构建的网页版 Photoshop （目前还处于 Beta 版本） * [MSN](https://www.msn.com/zh-hk?ocid=BHEA000)：微软使用基于 FAST 的 Web Components 重构了 MSN（之前是 React 构建的） * ... 现在回答上面的问题，Web Components 不重要吗？我想说：**未必！** 至少对于原生组件开发的方向，它依然是目前唯一并且权威的解决方案！ > Vue 官网文档明确指出其组件语法部分参考了 Web Components（通过本文下面的介绍您也会发现 Vue 与原生 Web Components 的某些相似之处），这足以说明这套规范并不是“空无主义”，它的出现的确对 Web 开发的模式和流程产生了重要的影响。现如今我们为了复用组件、增强文档自定义能力，我们在 Web 开发中大多都会使用一些 JavaScript 框架，如：Vue、 React 等。但随着 Web 技术的发展、Web Components 的完善与改进，在未来的某一天，我们真的有可能会在构建 UI 时，将专注点从 JavaScript 上重新转移到原生 HTML 中！目前，Web Components 规范包含三项主要技术： * [Custom element（自定义元素）](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements)：一组 JavaScript API，允许您自定义 HTML 标签及其行为。 * [Shadow DOM（影子 DOM）](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_shadow_DOM)：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。 * [HTML template and slots（HTML 模板和插槽）](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_templates_and_slots)： `