什么是Shadow DOM？
几周前，我写了一篇关于 上面的HTML文档将产生以下DOM树。 html h1 p Hello, world! How are you? title My first web page head body 在过去几年中，您可能听说过“Shadow DOM”和“Virtual DOM”等术语。这些虽然当然与原始DOM有关，但它们指的是截然不同的概念。在本文中，我将详细介绍Shadow DOM以及它与原始DOM的区别。在以后的文章中，我将对虚拟DOM进行分析。 HTML文档中的所有元素和样式以及DOM都位于一个全局范围内。页面上的任何元素都可以通过 当我们想要将样式应用于整个文档时，可以直接使用 另一方面，有些时候元素需要完全封装，我们不希望它受到全局样式的影响。一个很好的例子是第三方小部件，例如Twitter的“关注”按钮。以下是该小部件的示例： 假设您启用了Javascript并且检查了元素，您会注意到该按钮是一个 这是Twitter可以确保其小部件的预期样式不受文档中的任何CSS影响的唯一方式。尽管有一些方法可以使用级联来尝试实现相同的结果，但是没有其他方法可以提供与 创建Shadow DOM是为了允许在Web平台上本地封装和组件化，而不必依赖像 您可以将shadow DOM视为“DOM中的DOM”。它是自己独立的DOM树，具有自己的元素和样式，与原始DOM完全隔离。 虽然最近才指定供Web作者使用，但用户代理多年来一直使用shadow DOM来创建和设置复杂组件（如表单元素）。我们来看一下input。要在页面上创建一个，我们所要做的就是添加以下元素： 如果我们深入挖掘，我们会看到这个 这是使用shadow DOM实现的。暴露给主机HTML的元素记录了简单的 为了说明shadow DOM的工作原理，让我们使用shadow DOM而不是 首先，我们从shadow host开始。这是我们想要将新影子DOM附加到原始DOM中的常规HTML元素。对于像Follow按钮这样的组件，它还可以包含我们希望在页面上未启用Javascript或不支持shadow DOM时显示的回退元素。 请注意，我们不仅仅使用一切都是 global 的！等等，一切都是 global 的
document.querySelector（）方法访问，无论它在文档中的嵌套程度如何或放置在何处。同样，应用于文档的CSS可以选择任何元素，无论它在何处。*选择页面上的每个元素并将它们的盒模型进行修改。box-sizing* { box-sizing: border-box }
<iframe>元素，您实际看到的样式按钮其实是加载一个小文档。
<iframe>相同的效果。<iframe>这样的工具，而这些工具实际上并不是为此目的而制作的。DOM中的DOM
<input type="range">
<input>元素实际上是由几个较小的<div>元素组成，控制着轨道和滑块本身。
<input>，但在其下面有与组件相关的元素和样式，它们不构成DOM全局范围的一部分。shadow DOM如何工作
<iframe>来重新创建Twitter“follow”按钮。<span class="shadow-host">
<a >
Follow @ireaderinokun </a></span>
<a>元素作为dow host，因为某些元素（主要是交互元素）不能是dow host。
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
