浅析Shadow Dom

一、什么是Shadow Dom？

    shadow-dom 是浏览器的一种能力，它允许在浏览器渲染文档（document）的时候向其中的 Dom 结构中插入一棵 DOM 元素子树，但是特殊的是，这棵子树（shadow-dom）并不在主 DOM 树中 。
shadow-dom 结构示意：

tree.png
主要有几个概念：
document：就是我们的正常文档 document
shadow-root：Shadow DOM的根节点；
contents： 各子组件的 DOM 的具体实现；
shadow-host：Shadow DOM的容器元素，也就是宿主元素 ，如：<video>标签；

二、深入解析Shadow Dom

看以下代码为例：

```<input id="foo" type="range" />```

在浏览器中他会这样显示：

range.png
我们打开浏览器的Show user agent shadow Dom选项，Chrome浏览器在 setting.png 接着我们审查刚刚的元素 shadowDOM.png
    这里的 #shadow-root 所包含的内容其实就是所谓的 shadow-dom 。Shadow-dom 是游离在 DOM 树之外的节点树，但是他的创建基于普通 DOM 元素（非 document），并且创建后的 Shadow-dom 节点可以从界面上直观的看到。更重要的是，Shadow-dom 具有良好的密封性。 这就是Shadow-dom的作用

三、如何控制Shadow-dom

3.1、使用伪元素控制

    如上图所示，我们可以看到在节点上有一个pesudo属性，有了这个属性，我们就可以通过伪元素的方式控制他们

input::-webkit-slider-runnable-track {
            background-color: red;
}

效果如图： weiyuansu.png

3.2、使用Javascript控制

这里通过Javascript来创建一个shadow-dom元素

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

效果如图：

shadow-demo.png
Shadow-dom为Web组件化提供了封装隐藏性，使用具有良好密封性的 Shadow-dom 开发下一代 Web 组件将会是一种趋势。关于Web组件化可以参考： https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

参考

Using_shadow_DOM