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，将一些内容封装起来作为一个完整的整体来实现某一个功能。
原文地址：http://blog.csdn.net/winstar1688/article/details/43378687
