标签：
在前一篇博文中，简单地介绍了Shadow DOM是什么。
本文，将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。
Shadow DOM 能做什么
简单地说，有了Shadow DOM（若浏览器支持该规范），开发者可以封装HTML标签，CSS样式以及JavaScript，提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web Components技术，开发者将具有开发出类似<input type="time">或者类似<audio>、<video>这样的标签的能力。
如何创建Shadow DOM
要创建Shadow DOM，首先需要选择Shadow DOM挂载的节点，然后调用createShadowRoot()方法，创建一个Shadow DOM的根节点，在这个根节点上可以添加任意的由普通HTML标签形成的DOM节点，从而形式由一颗DOM Tree。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div class="host">Hello World!</div>
<script>
var host = document.querySelector('.host');
var root = host.createShadowRoot();
var node = document.createElement('h1');
node.textContent = 'Shadow DOM 介绍';
var para = document.createElement('p');
para.textContent = 'Shadow DOM 详细信息';
root.appendChild(node);
root.appendChild(para);
</script>
</body>
</html>
上述代码中，首先选择了class为host的节点，然后在这个节点上调用createShadowRoot()方法创建Shadow DOM的根节点root。然后再分别创建了两个普通HTML节点并设置其内容，最后将它们添加到root上。
运行结果，如下图所示：
从运行结果可以看到，原来div中的“Hello World!"内容并没有在浏览器中渲染出来，而是渲染Shadow DOM中的内容。这也是Shadow DOM的一个特性，在后续的介绍中将会进行详细解释。
Shadow DOM的相关概念
在上一节中，为了创建Shadow DOM，先需要选择一个DOM 节点，然后调用createShadowRoot()方法创建Shadow DOM的根节点。这个根节点，称为Shadow Root。与Shadow Root关联的那个节点称为Shadow Host。与Shadow DOM对应，常规的DOM，称为Light DOM。在Light DOM与Shadow DOM之间存在一个边界，称为Shadow Boundary。Shadow Boundary的重要作用就是，避免了Light DOM中的样式渗透到Shadow
DOM中，从而避免了样式冲突等问题。
Shadow DOM（二）
标签：
原文地址：http://blog.csdn.net/winstar1688/article/details/43494533
