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/
时间: 2024-08-26 15:02:08