shadow dom 隔离代码封装

时间：2016-01-27 19:38:15 阅读：132 评论：0 收藏：0 [点我收藏+]

标签：

Shadow DOM是指浏览器的一种能力，它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。

Shadow DOM 解决了 DOM 树的封装问题。

有了 Shadow DOM，元素就可以和一个新类型的节点关联。这个新类型的节点称为 shadow root。与一个 shadow root 关联的元素称作一个 shadow host。shadow host 的内容不会渲染；shadow root 的内容会渲染。

比如，你拥有如下的标记：

<button>Hello, world!</button><script>var host = document.querySelector(‘button‘);var root = host.createShadowRoot();
root.textContent = ‘こんにちは、影の世界!‘;</script>

因此，相比显示以下内容

Hello, world!

页面将会呈现如下内容

こんにちは、影の世界!

不仅如此，若页面中的 JavaScript 想获得按钮的 textContent 是什么，它不会得到 “こんにちは、影の世界!”，而是 “Hello, world!”，因为 shadow root 下的 DOM 子树被封装了起来。

介绍一个(可能不被遵守的)经验法则，你不应该把内容放到 Shadow DOM 中。内容必须放入文档内以便屏幕阅读器，搜索引擎，扩展等类似程序可以访问到。在创建一个吸引人的，可重用的部件时，那些无意义的标记要放进 Shadow DOM 中，可内容还得留在页面里。

http://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom/

shadow dom 隔离代码封装

标签：

原文地址：http://www.cnblogs.com/chuangweili/p/5164070.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

shadow dom 隔离代码 封装

shadow dom 隔离代码封装