首页 > 代码库 > Shadow DOM

Shadow DOM

2024-11-25 11:20:02   205人阅读

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，将一些内容封装起来作为一个完整的整体来实现某一个功能。


Shadow DOM


联系
我们