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(Virtual Dom) VS 影子DOM(Shadow Dom)