什么是 Shadow DOM ？
引用 MDN 上的原文是这样说的：
Shadow DOM 为 Web 组件中的 DOM 和 CSS 提供了封装。Shadow DOM 使得这些东西与主文档的 DOM 保持分离。你也可以在一个Web组件外部使用 Shadow DOM 本身。
为什么要把一些代码和网页上其他的代码分离？原因之一是，大型站点若CSS没有良好的组织，导航的样式可能就『泄露』到本不应该去的地方，如主要内容区域，反之亦然。随着站点、应用的拓展，这样的事难以避免。
利用这些特性，可以使得 Web 组件的封装变得更加容易和可行。
综上，可以认为 Shadow DOM 是主要是为了解决一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界问题而提出的。
如何使用 Shadow DOM ？
<!DOCTYPE html>
<html>
<head>
<title>shadow-dom</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
window.onload = function() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
// 使用 createShadowRoot 创建影子根节点
var root = div1.createShadowRoot();
root.innerHTML = '<div>This is a div from shadow dom1!</div>';
// 使用 attachShadow 在宿主元素下附加一个影子节点
// mode设为closed， 会让影子节点变为只读
var shadow = div2.attachShadow({mode: 'open'})
shadow.innerHTML = '<div>This is a div from shadow dom2!</div>';
// 影子根节点
console.log(div1.shadowRoot);
// 影子节点的宿主元素
console.log(div1.shadowRoot.host);
}
</script>
</html>
1322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
