## 1写在前面最近哈啰单车前端团队开源的Quark Design组件库，号称是下一代前端组件库，可以同时在任意框架或无框架中使用。那么，什么是Web Components？ ## 2什么是Web Components？现今前端生态中框架层出不穷，在生产中为了提升效率和标准化组件，就会针对框架开发组件库。但是各种框架之间是不兼容的，对此需要对应开发适应框架的组件库，这样也造成维护成本攀升。就如同物理界有电磁相互作用、强相互作用以及弱相互作用，需要单独的物理理论来解释这三种作用造成的物理现象，这样让众多物理学家在朝着**大统一理论**前进，而`Web Components`可以看作是现今UI组件库"大统一理论"的一种解决方案。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7052014222834a1596ed909766fadf0c~tplv-k3u1fbpfcp-zoom-1.image) `Web Components`与`React、Vue`等框架中的组件类似，其实在Vue中也采用了很多基于`Web Components`的设计。这是一个可复用的UI构建模块，封装了所有渲染所需要的`HTML`、`CSS`以及基于`Javascript`的逻辑。最大的区别是，它不依赖于特定的`JavaScript`框架，而是利用浏览器原生提供的技术，这样你的Web组件就与框架无关了。 ## 3Web Components的主要内容 `Web Components`的主要内容如下： - `Custom Elements`：原生提供的API，用于可自定义`Custom Elements`和行为。 - `Shadow DOM`：原生提供的API，用于封装与主文档DOM隔离的私有DOM，不受外部DOM的样式和行为的影响。 - `Templates`： - `Attributes`： - `Slots`： - `Life cycle methods`：接下来，跟随我的脚步在例子中逐个实现这些概念，逐个击破理论。 ## 4`Custom Elements` `Custom Elements`是`Web Components`中的一个重要特性，可以提供给开发者将html的功能封装为自定义标签，方便进行复用。也就是说，`Custom Elements`本质上是用户用于实现在`html`中有效使用的，类似`

`、`` } } // 3、进行自定义组件的注册 customElements.define("one-button", OneButton) // index.html // 4、html中进行使用 ``` 运行展示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0365a41bdca741828dbbf21e124b8ef2~tplv-k3u1fbpfcp-zoom-1.image) ## 5Shadow DOM `Shadow DOM`与原生DOM的区别就是用户自定义封装的DOM，本质上还是DOM元素。不同的是，`Shadow DOM`可以将自定义的DOM片段与其他DOM进行隔离，可以实现样式不受外部DOM的影响，类似与使用`iframe`内嵌了一个html。也正是`Shadow DOM`的存在，能够进行DOM隔离、实现独立的组件王国，使得自定义组件跨域框架的约束，不再耦合，确保在任何无框架和任何框架中正常使用。如图所示： ![图示来自MDN文档](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b35f2e7c1c4439ca08c0139efb5a886~tplv-k3u1fbpfcp-zoom-1.image) 图示来自MDN文档 > 一些 Shadow DOM 特有的术语： > > - Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。 > - Shadow tree：Shadow DOM 内部的 DOM 树。 > - Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。 > - Shadow root: Shadow tree 的根节点。 ` Shadow DOM `并不是新生事物，在原生`