Shadow DOM
Shadow DOM
Shadow Host
Shadow Root
Shadow Boundary
创建一个shadow DOM：选择一个元素然后调用createShadowRoot()方法，这样将返回一个文档片段（document fragment），可以在这个文档片段上添加内容。
调用createShadowRoot()方法的这个元素，称为Shadow Host。Shadow Host是Shadow DOM中唯一对用户可见的元素。
由createShadowRoot()方法创建返回的文档片段（document fragment）称为Shadow Root。Shadow Root及其内部的内容对用户是不可见的，但浏览器能够渲染其内容。
Shadow Boundary，一个不可见的边界，使shadow root中任何HTML与CSS与父文档隔离，而冲突/覆盖。
有了Shadow DOM，元素就可以和一个新类型的节点关联。这个新类型的节点称为shadow root。
与一个shadow root关联的元素称作一个shadow host。shadow host的内容不会渲染；shadow root的内容会渲染。
Demos：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demos</title>
</head>
<body>
<button>Hi</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.innerHTML = '点我，点我';
</script>
</body>
</html>上述代码中，通过<button>元素使用createShadowRoot()方法创建了一个shadow root，这样<button>也就成为了shadow host。然后将shadow root的子节点设置为"点我，点我"文本。
运行上述代码会发现，按钮<button>显示的文本内容为“点我，点我”而不是“Hi”。
而如果在上述脚本中加入以下代码：
host.onclick = function () {
alert(this.innerHTML);
}点击按钮后会发现，获取到的内容却还是原来的“Hi”。
这是因为shadow root下的DOM子树被封装起来了。
相关推荐
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children