# 第2期 Shadow DOM来了解一下

# Shadow DOM是什么

顾名思义,即影子DOM,看不见摸不着,我们无法直接控制操纵的DOM结构。

Mozilla对其的描述,点击查看

Shadow DOM 为Web组件中的 DOM和 CSS提供了封装。Shadow DOM 使得这些东西与主文档的DOM保持分离。你也可以在一个Web组件外部使用 Shadow DOM本身。

来看下W3CShadow DOM的描述:

  • A shadow host is an element that hosts one or more node trees.
  • A shadow tree is a node tree hosted by a shadow host.
  • A shadow root is the root node of a shadow tree.

这三句话告诉我们:

  • shadow dom 由一颗或多颗 shadow tree 组成,并且需要一个普通的dom元素作为它的容器
  • shadow tree 是一颗节点树
  • shadow root 是shadow tree的根节点

# 简单理解

我们来写一个小例子来加深对其的理解,写一个简单的滑块标签

<input type="range">

然后在Chrome浏览器按F12打开开发者工具,再按F1打开设置项,找到Show user agent shadow DOM并把其勾选上。

切换到Elements,我们发现input标签下多了#showdow-root (user agent)这个东西,它包含了input控件内部的DOM结构,这就是所谓的Shadow DOM了。

为什么我们只写了一个input标签,会多出这么多东西呢?实际上就是浏览器自动帮我们加上的,只不过通过某种技术隐藏了起来而已。

那浏览器为什么要这么做呢?很明显就是让我们写代码的时候更简单,我们可以再写一个标签来测试一下:

<video controls="controls" autoplay="autoplay">
  <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
  <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" />
Your browser does not support the video tag.
</video>

你会发现多了太多的代码了,所以,实际上是浏览器对某些复杂的标签做了一层类似组件的封装,把我们可能无需关心的部分隐藏起来了,这样,我们使用的时候就可以少写很多代码。

# 如何控制Shadow DOM?

既然是浏览器有意隐藏起来的DOM结构,那我们是否可以控制内部的DOM结构呢?并非完全不可以,我们会发现上面滑块的Shadow DOM里有pseudo这样的属性

<div pseudo="-webkit-slider-runnable-track" id="track"></div>

因此我们可以通过CSS伪元素选中该元素,然后修改它的样式:

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

可以发现整个滑块背景都变成了红色。虽然这并不是我们想要的效果,但这确实是Shadow DOM开放给我们选择的。

不幸的是,虽然很多浏览器都支持Shadow DOM,但目前只有Chrome浏览器支持对其审查和附加选择器。

# Shadow DOM的兼容性

我们可以在caniuse.com查看:查看地址

# 如何创建一个Shadow DOM元素?

除了原生的Shadow DOM,我们可不可以闯将自己的呢?

Shadow DOM必须附加在一个元素上,可以是HTML文件中的一个元素,也可以是脚本中创建的元素;可以是原生的元素,如<div><p>;也可以是自定义元素如<my-element>

其实有这样一组API来实现的,通过Element.attachShadow()方法来为元素附加一个Shadow DOM。来看个例子:

<div id="sd-box"></div>
var shadow = document.querySelector('#sd-box').attachShadow({
   mode: 'open' 
});

这里的mode用来指定Shadow DOM封装的模式,可取值有:

  • open:开放的封装模式
  • closed:关闭的封装模式

这时候,页面上并没有什么变化,继续添加下面的代码:

shadow.innerHTML = '<p>this is Shadow DOM</p>';

可以看到页面出现上面的文本,该标签的结构变成了

<div id="sd-box">
  #shadow-root (open)
  <p>this is shadow DOM</p>
</div>

证明我们确实是通过attachShadow()方法成功为某个元素创建了Shadow DOM。

如果想为其添加样式,可以通过下面的方式来实现:

shadow.innerHTML += '<style>p { color: red; }</style>'

可以发现,页面上该标签的字体变成了红色。

Shadow DOM API其实是Web Components的一部分,用来封装组件的DOM和CSS,区别于Vue.js这样的组件化框架,Web Components是浏览器原生的组件化方式,不过目前还处于初期,只有Chrome和Safari极少数浏览器支持。

好了,本文就先到这里了。

# 最后

感谢您的阅读,希望对你有所帮助。由于本人水平有限,如果文中有描述不当的地方,烦请指正,非常感谢。

# 关注

欢迎大家关注我的公众号前端帮帮忙,一起交流学习,共同进步!

# 参考

上次更新: 1/16/2020, 5:45:04 PM