什么是 Shadow DOM？

Shadow DOM 是一个革命性的新技术，先来看下他是什么样子的

以<video>标签为例非常适合，例如

<video controls autoplay name="media"> 
<source id="mp4" src="http://xxx.mp4" type="video/mp4">
</video>

用开发者工具查看DOM结构时，就是一个 video 节点，但视频播放器本身有播放/暂停按钮、进度条等按钮，DOM源码这么干净，那实现这些组件的代码是从哪儿来的呢？

这就是Shadow DOM的概念，可以把一些html标签进行封装，组成一个DOM树的子树，这个子树可以被多处使用

简单理解 Shadow DOM可以帮助我们封装成可复用的界面组件

Shadow DOM 的价值是什么？

以Bootstrap为例，Bootstrap是一个UI框架，使用它需要将一系列CSS、JS及规定的HTML放到页面上

例如使用导航组件

（1）引入bootstrap css

（2）引入jQuery

（3）引入Bootstrap js

（4）页面中加入bootstrap导航模块的标准化html代码

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</div>
</nav>

这个使用过程首先是比较繁琐，二是容易出错，因为如果html代码没有完全按照标准写，显示会有问题，或者自己的CSS和bootstrap的css出现冲突，也会出现问题

如果使用 Shadow DOM 进行封装，这个导航的组件使用起来可能就是这个样子的：

<bootstrap-navbar fixed-top> 
<a href="#">首页</a>
<a href="#">关于我们</a>
</bootstrap-navbar>

这样就非常方便了

Shadow DOM 使用示例

由于 Shadow DOM 是新技术，各浏览器还没有普遍支持

使用 createShadowRoot() 方法创建Shadow DOM，chrome浏览器兼容

<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM</title>
</head>
<body>
<div id="test"></div>
<script>
var div = document.getElementById('test');
var root = div.createShadowRoot();
var cnt = document.createElement("div");
cnt.innerHTML = "shadow";
root.appendChild(cnt);
</script>
</body>
</html>