webComponent

webComponent

webComponent mdn

webComponent 是一套技术的组合。
组件特点：高内聚低耦合。
js 可以做到，但是 css 是全局的，DOM 也是全局只有一个。

webComponent 怎么做到的呢，主要是 3 点

• Custom elements 自定义元素
• shadow DOM 影子 DOM
• HTML templates html 模板

用法：

1. 使用 templates 属性来创建模板
2. 创建一个 MyComoonent 类，在该类的构建函数中完成三件事

• 查找模板内容
• 创建影子 DOM
• 再将模板添加到影子 DOM 上

3. 使用 customElements.define('my-component', MyComponent)来自定义元素

webComponent 的核心是：影子 DOM

shadow DOM 简介：

• 将模板中的内容和全局 DOM 和 CSS 进行隔离。内部的 css 和 dom 不会影响外部，外部要访问 shadow DOM 里的样式和元素，需要通过约定的接口来实现。通过 document.getElementsByTagName('div')来查找所有 div 元素，是无法查找 shadow DOM 内部的元素的。
• shadow DOM 里的 js 脚本是不会隔离的。

shadow DOM 作用：

1. 影子 DOM 中的元素对整个网页不可见
2. 影子 DOM 的 css 不会影响到整个网页的 CSSDOM，影子 DOM 内部的 css 只对内部的元素起作用。

怎么实现 shadow DOM？

每个 shadow DOM 都有一个 shadow root 的根节点，可以将要展示的样式和元素添加到 shadow DOM 的根节点上。每个 shadow DOM 可以看到是一个独立的 DOM，有自己的样式，自己的属性。

1. 查找的时候做判断。当通过 DOM 接口去查找元素时，渲染引 擎去判断 my-component 属性下面的 shadow root 元素是否为 shadow DOM，如果是，就跳过查询
2. 渲染的时候做判断。生成布局树的时候，渲染引擎去判断 my-component 属性下面的 shadow root 元素是否为 shadow DOM，如果是，在 shadow DOM 内部的节点选择 CSS 样式的时候，会直接使用影子 DOM 内部的 CSS 属性。最终渲染出来的效果就是 shadow DOM 内部定义的样式。

vue与WebComponent

文档