webComponent

作者: IOneStar | 来源:发表于2022-01-30 11:30 被阅读0次

webComponent

webComponent mdn

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

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

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

用法:

  1. 使用 templates 属性来创建模板
  2. 创建一个 MyComoonent 类,在该类的构建函数中完成三件事
  • 查找模板内容
  • 创建影子 DOM
  • 再将模板添加到影子 DOM 上
  1. 使用 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

文档

相关文章

网友评论

    本文标题:webComponent

    本文链接:https://www.haomeiwen.com/subject/kiuqkrtx.html