web组件之shadow dom

什么是shadow DOM

shadow DOM是Web Components的四大组件之一,它可以将一个隐藏的、独立的DOM添加到一个元素上,用来创建基于组件的应用。

Shadow DOM 与普通 DOM 相同,但有两点区别:

  1. 创建/使用的方式
  2. 与页面其他部分有关的行为方式。 

通常,您创建 DOM 节点并将其附加至其他元素作为子项。 借助于 shadow DOM,您可以创建作用域 DOM 树,该 DOM 树附加至该元素上,但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。 您在影子中添加的任何项均将成为宿主元素的本地项,包括 <style>。 这就是 shadow DOM 实现 CSS 样式作用域的方式。

shadow DOM特点

  • 隔离 DOM:组件的 DOM 是独立的(例如,document.querySelector() 不会返回组件 shadow DOM 中的节点)。
  • 作用域 CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏,页面样式也不会渗入。
  • 组合:为组件设计一个声明性、基于标记的 API。
  • 简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器,更通用的 id/类名称,而无需担心命名冲突。
  • 效率 - 将应用看成是多个 DOM 块,而不是一个大的(全局性)页面。

shadow DOM的使用

创建一个shadow DOM,继承自 HTMLElement,在构造函数可以创建和操作dom

class ToolTip extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow({ mode: 'open' });
    var header = document.createElement('h1');
    header.className = 'shadow-dom-header';
    header.innerHTML = 'shadow dom';
    var style = document.createElement('style');
    style.textContent = `.shadow-dom-header { color: red; }`;
    shadow.appendChild(style);
    shadow.appendChild(header);
  }
}

customElements.define('tool-tip', ToolTip);

使用的方法跟原始的html标签一样

<tool-tip></tool-tip>

生成的dom结构和效果如下

shadow DOM的样式是独立开的,不会受到外界的 class 的影响,内部也不会影响到外部的样式

slot元素

Shadow DOM 使用 <slot> 元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符,其实用法跟 vue 相似,可能是 vue 采用的这种思想哈。

如果 <slot> 引入了元素,则这些元素可 “跨越” shadow DOM 的边界。 这些元素称为分布式节点。从概念上来看,分布式节点似乎有点奇怪。 Slot 实际上并不移动 DOM;它们在 shadow DOM 内部的其他位置进行渲染。

这句话比较难理解,我们先来尝试下如何使用 slot ,首先在上述的构造函数里面创建一个 slot 

let slot = document.createElement('slot');
shadow.appendChild(slot);

使用 tool-tip 组件

<tool-tip>
  <div>i'm a div</div>
</tool-tip>

可以看出 tool-tip 的子元素 div 会插在 shadow-root 的外部

标签: javascript html5

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论