`
2008winstar
  • 浏览: 57808 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke： 写的很好，也可以看看那这个文章，我感觉学的还可以。http:/ ...
    HTML

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

 

 

分享到：
| HTML template
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics