浅析Shadow Dom
2020-03-28 本文已影响0人
agamgn
一、什么是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
