关于前端:Chrome浏览器如何查看-Shadow-Dom-结构

38次阅读

共计 596 个字符，预计需要花费 2 分钟才能阅读完成。

如果咱们编写如下的代码：

    <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 知识点。

正文完