shadow dom 隔离代码 封装

Posted 2020-06-09

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/