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子树被封装起来了。