Shadow DOM

最新推荐文章于 2023-01-05 21:00:00 发布

2008winstar

最新推荐文章于 2023-01-05 21:00:00 发布

阅读量3.5k

点赞数

分类专栏： Web Components 文章标签： Web Components

本文链接：https://blog.csdn.net/winstar1688/article/details/43378687

版权

12 篇文章 0 订阅

订阅专栏

Shadow DOM是什么

Shadow DOM是Web Components规范中的一个组成部分。Web Components的概要介绍，可以参考之前的几篇博文：Web Components概述、HTML Templates。

在介绍Shadow DOM之前，可以先看一个例子。

新建一个HTML页面，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <input type="time"/>
</body>
</html>

在浏览器中访问这个页面

（1）在Firefox（版本：35.0.1）下的效果如图1所示：

（2）在Chrome（版本：40.0.2214.93m）下的效果如图2所示：

我们知道，type=“time”是HTML5中新增的属性值，而且当浏览器还不支持相应的属性值时，浏览器会退化到type=“text”的形式，正如图1所示效果。

而浏览器支持该属性值的话，则能显示出我们想要的效果，如图2所示。

那么问题来了：图2的效果是怎么实现的呢？使用input标签，正常的效果应该是图1的呀，怎么会出现图2的效果呢？我们能否知道其实现的具体细节呢？如果能，我们能否也能实现类似的效果呢？

要想知道它是怎么实现的（也就是实现的具体细节），我们有一个方法，那就是【审查元素】，在Chrome下，选择【审查元素】，让我们看看它细节。

在调试面板中，我们看到：

这里看到的代码，跟源码一模一样。

这时我们需要打开调试面板的设置工具，并勾选其中的“Show user agent shadow DOM"选项，如图：

设置完成后，关闭设置面板，回到调试面板中，我们会看到如下图的效果：

这时，我们会看到在input标签里面其实包含着很多普通的HTML标签，如div、span等，这些标签都包含在”#shadow-root (user-agent)"里面。“#shadow-root”里面的内容（标签）就是Shadow DOM的内容，也就是说这就是Shadow DOM。

浏览器正是通过Shadow DOM，将一些内容封装起来作为一个完整的整体来实现某一个功能。

关注