HTML 中的影子 dom

Posted

技术标签:

【中文标题】HTML 中的影子 dom【英文标题】:Shadow dom in HTML 【发布时间】:2015-07-10 09:47:44 【问题描述】:

我最近听说过 Shadow DOM。在观看有关 Angular 2 发布的视频时,演示者反复提到 Shadow DOM,但没有明确表达。 Shadow DOM 的真正含义是什么?

【问题讨论】:

webcomponents.org/articles/introduction-to-shadow-dom 到目前为止,您自己尝试过什么吗?仅来自 Google 的“Shadow DOM”的前三个结果看起来非常有希望...... 这不是谷歌。您得到的任何答案都可能是其他人为您进行网络搜索……您应该自己做。 MDN 文档总是一个很好的起点developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM 【参考方案1】:

我找到的最好的解释是来自What the Heck is Shadow DOM?,如下所示:

Shadow DOM 是指浏览器包含子树的能力 将 DOM 元素放入文档的呈现中,但不放入 主文档 DOM 树。

一个重要的用例是网页上的视频控件。标记只显示一个视频标签,带有一些属性和源标签。所有视频操作的附加代码都隐藏在 Shadow DOM 中,对页面的其余部分不可用。封装了标签的实际标记、javascript和样式,隐藏了每个浏览器供应商已经编写的视频控件的实现细节。

因此,虽然它存在于 DOM 中,但它隐藏在呈现它的页面中。因此,要查看 Shadow DOM,您可以在 Chrome 的开发工具下启用它。

简短的回答是,Shadow DOM 是构成 Web 组件的四种技术之一。

对于定义,Web 组件是: W3C 的组件平台,允许使用标准化的构建块构建网站。 Web 组件包括自定义元素、Shadow DOM 和 html 导入和模板。

Shadow DOM 是 Web Components 的一种技术(虽然每个都可以单独使用):

    自定义元素:是一种创建您自己的自定义 HTML 标记和元素的功能。他们可以有自己的脚本行为和 CSS 样式。它们是 Web 组件的一部分,但也可以单独使用。 HTML 模板:HTML 模板元素是一种用于保存客户端内容的机制,该内容不会在页面加载时呈现,但随后可以在运行时使用 JavaScript 进行实例化。将模板视为内容片段,正在存储以供后续在文档中使用。 Shadow DOM:为 Web 组件中的 JavaScript、CSS 和模板提供封装。 Shadow DOM 使得这些东西与主文档的 DOM 保持分离。您还可以在 Web 组件之外单独使用 Shadow DOM。 HTML Imports:旨在作为 Web Components 的打包机制,但您也可以单独使用 HTML Imports。您可以使用 HTML 文档中的标记导入 HTML 文件。

见Introduction to the Shadow DOM。

【讨论】:

【参考方案2】:

将影子 DOM 视为封装的(私有)DOM。 您无法以访问常规 DOM 的方式访问影子 DOM,例如“document.querySelector()”。

假设您定义了一个可重用的自定义元素(其中包含其 DOM 树)。然后在应用程序 HTML 中使用自定义元素。

现在,DOM 下(现在称为“宿主元素”)已经变成了影子 DOM 子树(在影子根下),对父结构隐藏了!

希望对你有所帮助。

【讨论】:

【参考方案3】:

它指的是从页面的其余部分创建一个完全沙盒化的“子”DOM 的能力。对于 web 组件很有用,可重用的“小部件”允许不用担心他们的 css/js 会影响他们不应该影响的东西。 http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

如果您想查看它的实际效果,请查看https://www.polymer-project.org/。

【讨论】:

以上是关于HTML 中的影子 dom的主要内容,如果未能解决你的问题,请参考以下文章

影子dom中的脚本不起作用

[译] 认识虚拟 DOM

如何在影子 DOM 中定位 ::part 属性的子项

虚拟DOM(Virtual Dom) VS 影子DOM(Shadow Dom)

在 Angular 2 中使用影子 DOM 时 Node.contains() 是不是有效?

是否可以将事件侦听器绑定到来自外部脚本的影子 dom 内的元素?