Chrome浏览器如何查看 Shadow Dom 结构

Chrome浏览器如何查看 Shadow Dom 结构

若是咱们编写以下的代码：

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

    <div>
        <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
            your browser does not support the video tag
        </video>
    </div>

在页面中渲染出以下的 UI：

一个滑块（slider）以及一个视频（video）元素。可是咱们会发现其实咱们并无编写 input 的样式，input渲染出来应该是一个输入框才对。可是写 type 为 range以后咱们就会看到一个滑块的 UI 效果。以及视频元素里咱们没有特殊处理播放按钮，视频时常，以及其余的控制按钮元素。

那这些元素是怎样生成的呢？咱们打开 chrome 的 devtools 以后审查元素：

也没有看到对应的元素以及 dom 结构。

其实这就是所谓的 Shadow Dom，浏览器隐藏了这一部分的实现。而且封装了实现的细节，包括样式部分也作了隔离。

那咱们如何可以查看这些元素的结构呢？在Chrome浏览器中打开开发者调试工具：

勾选如图当中的 Show user agent shadow DOM。而后再去审查元素：

此时，咱们就可以看到如图当中的 dom 结构啦！！！

后续会再深刻讨论涉及到相应的 Shadow DOM知识点。