第六题：对 shadow DOM 的了解？

[Ray-56]

说说你对 shadow DOM 的了解

[GenXiaoLe]

Shadow DOM（影子DOM)

• 概念
  Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，创建这些新标签内容和相关的的API被称为Web Component。包括：
  • shadow-root：Shadow DOM的根节点；
  • shadow-tree：Shadow DOM包含的子节点树结构；
  • shadow-host：Shadow DOM的容器元素，如：
• 存在的意义
  Shadow-dom 是游离在 DOM 树之外的节点树，但是他的创建基于普通 DOM 元素。并且创建后的 Shadow-dom 节点可以从界面上直观的看到。它具有非常良好的密封性，可以让我们自己去开发和封装一些属性功能在DOM节点中。比如
• 如何使用
  • 使用伪元素控制 shadow-dom 样式
    在Chrome的控制台中查看可以发现，每一个节点都包含了pesudo属性，知道这些属性后，我们可以用伪类的方式，比如：input::-webkit-input-placeholder选择器表示选中在标签中用到的pesudo为-webkit-input-placeholder的属性。
  • 使用 Javascript 创建一个 shadow-dom 元素
    可以通过element.createShadowRoot()来创建目标容器（shadow-host）对应deshadow-root。比如：

      let host = document.querySelector('div');
      let root = host.createShadowRoot();
      root.innerHTML = '<h1 style="background-color: #2cacff; color: white;">这是支持shadow-dom的标题~</h1>';

[MMmaXingXing]

Shadow DOM
Shadow是HTML的一个规范,它允许浏览器开发者封装己自己的HTML标签,CSS样式和javascript代码,同时也可以让开发人员创建类似

内容:

学习一个Shadow需要了解的相关知识有:

Shadow Host: 一个常规的DOM节点 Shadow DOM 会被添加到这个节点上。

Shadow Three: Shadow DOM 内部的DOM树。

Shadow boundary: Shadow DOM 结束的地方 也是常规DOM 开始的地方。

Shadow root: Shadow Three 根结点。

作用

Shadow DOM 可以在WEB平台本地封装和组件化,而不必依赖像<iframe>这样的工具, 在组件中使用自己独立的样式和方法,并且保持自己的独立性。

使用

1、 创建一个Shadow

const shadowEl = document.querySelector(".shadow-host");
const shadow = shadowEl.attachShadow({mode: 'open'});

2、将新元素添加到Shadow 中(和基本dom操作相似,只是需要加入shadow中)

shadow.appendChild(child);