webComponent
webComponent 是一套技术的组合。
组件特点:高内聚低耦合。
js 可以做到,但是 css 是全局的,DOM 也是全局只有一个。
webComponent 怎么做到的呢,主要是 3 点
- Custom elements 自定义元素
- shadow DOM 影子 DOM
- HTML templates html 模板
用法:
- 使用 templates 属性来创建模板
- 创建一个 MyComoonent 类,在该类的构建函数中完成三件事
- 查找模板内容
- 创建影子 DOM
- 再将模板添加到影子 DOM 上
- 使用
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 作用:
- 影子 DOM 中的元素对整个网页不可见
- 影子 DOM 的 css 不会影响到整个网页的 CSSDOM,影子 DOM 内部的 css 只对内部的元素起作用。
怎么实现 shadow DOM?
每个 shadow DOM 都有一个 shadow root 的根节点,可以将要展示的样式和元素添加到 shadow DOM 的根节点上。每个 shadow DOM 可以看到是一个独立的 DOM,有自己的样式,自己的属性。
- 查找的时候做判断。当通过 DOM 接口去查找元素时,渲染引 擎去判断 my-component 属性下面的 shadow root 元素是否为 shadow DOM,如果是,就跳过查询
- 渲染的时候做判断。生成布局树的时候,渲染引擎去判断 my-component 属性下面的 shadow root 元素是否为 shadow DOM,如果是,在 shadow DOM 内部的节点选择 CSS 样式的时候,会直接使用影子 DOM 内部的 CSS 属性。最终渲染出来的效果就是 shadow DOM 内部定义的样式。
网友评论