什么是影子根
And*_*rew 87 html dom google-chrome google-chrome-devtools
在Google Chrome的开发者工具中,我看到了#shadow-root正确的<html lang="en">标签.它做了什么以及它用于什么？我没有在Firefox和IE中看到它; 仅限Chrome,这是一项特殊功能吗？
如果我打开它,它会显示<head>并且<body>在命名旁边有一个链接reveal,通过点击,它指向<head>和<body>,没有别的.
Gar*_*bee 91
这是Shadow DOM存在的特殊指示符.这些已存在多年,但开发人员直到最近才开始使用API.Chrome已经有一段时间使用此功能,其他浏览器仍在追赶.它可以在"元素"部分下的DevTools设置中切换.取消选中"显示用户代理Shadow DOM".这至少会隐藏内部创建的任何Shadow DOM(如选择元素).如果它影响用户创建的,例如自定义元素,我立刻不确定.
这些也出现在像iframe这样的东西中,你有一个独立的DOM树嵌套在另一个内部.
Shadow DOM只是说页面的某些部分在其中有自己的 DOM.样式和脚本可以在该元素中作用域,因此在其中运行的内容仅在该边界中执行.
这是Web组件工作所需的主要部分之一.这是一种新技术,允许开发人员构建自己的封装组件,开发人员可以像任何其他HTML元素一样使用它们.
Rao*_*Rao 61
作为Shadow DOM的一个例子,当你<video>在网页上有一个标签时,它在主DOM中只显示一个标签,但是如果你启用了Shadow DOM,你将能够看到视频播放器的HTML(播放器DOM).
本文适当地解释了这一点,http://webcomponents.org/articles/introduction-to-shadow-dom/
- 是的，看起来他们的 ssl 证书需要更新。您仍然可以通过忽略警告来查看该站点。 (2认同)
Ani*_*kur 12
在 Web 组件的情况下，有一个基本问题使由 HTML 和 JavaScript 构建的小部件难以使用。
问题：小部件内的 DOM 树没有从页面的其余部分封装。缺乏封装意味着您的文档样式表可能会意外地应用于小部件内的部分；您的 JavaScript 可能会意外修改小部件内的部分；您的 ID 可能与小部件内的 ID 重叠等等。
Shadow DOM 解决了 DOM 树封装问题。
例如，如果您有这样的标记：
<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 子树。
注意：我从https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 中获取了上述内容，因为它比这里已有的答案更能帮助我理解 shadow DOM。我在此处添加了相关内容，以便对其他人有所帮助，但请查看链接以进行详细讨论。
- `createShadowRoot()` 方法已被[弃用](https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot)，转而使用 [`attachShadow()`](https: //developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow），它有一个属性功能 `{mode: 'open'}` 允许 Javascript 现在解决它。 (4认同)
- 从广义上讲，这是最好的答案。它解释了“shadow dom”实际解决的根本问题、它存在的原因以及我们为什么可能考虑使用它。 (3认同)
- 好吧，它基本上就是 DOM 命名空间，可以这么说，从其他语言借用了这个术语。 (2认同)
| 归档时间： |
|
| 查看次数： |
49457 次 |
| 最近记录： |