需要帮助理解Shadow DOM

时间：2016-04-15 20:55:34

标签： javascript dom shadow-dom

通过阅读有关Shadow DOM的文章和教程，我发现了一些让我感到困惑的描述：

“Shadow DOM是指浏览器将DOM元素子树包含在文档呈现中，但不包含在主文档DOM树中的能力。”

所以Shadow树不是DOM树的一部分？但浏览器仍会看到它并呈现其内容？

3 个答案:

答案 0 :(得分：9)

我认为理解shadow DOM最简单的方法是举例：

<div>
  <input type="range">
</div>

上述代码的DOM看起来与您可能期望的完全一样：

div
- input[type=range]

但是你的浏览器呈现的是其他东西：有一条水平线和一个拇指（或旋钮或你称之为的任何东西）。所以在内部，input有一些子元素，但它们不会通过DOM公开：

div
- input[range]
  - bar
  - thumb

但正如我已经写过：那些不是通过DOM公开的，所以它们隐藏给你，你的CSS，你的JS（这不完全正确，浏览器可以给你一些访问权限，例如基于Webkit的浏览器允许你可以通过-webkit-slider-thumb伪元素来操纵CSS中拇指的外观。

另一方面，这些元素需要在DOM的某个地方由浏览器呈现，这就是shadow DOM的用武之地：在内部，浏览器取代了DOM中input[type=range]的每个出现位置。树

input[range]
- bar
- thumb

那就是影子DOM：某些元素是某些元素的子元素，不是因为你把它们放在HTML中，而是因为父元素被定义为拥有这些子元素（就像音频元素被定义为具有播放按钮）并且不通过DOM公开，而是由浏览器内部生成。

可以在此处找到更多示例和更全面的解释：What the Heck is Shadow DOM?

答案 1 :(得分：6)

来自Shadow DOM规范，

  

文档树 是一个节点树，其根节点是一个文档。

     

任何元素都可以 host 零或一个关联的节点树，称为    影子树 。

     

影子主机 是托管一个影子树的元素。

     

影子根 是影子树的根节点。

     

树木树 是节点树的树。

     

enter image description here

然后，是的，影子树在文档树之外，但它们仍然连在一起形成一棵树。

是的，渲染阴影内容而不是元素的后代，如CSS Scoping中所定义：

  

元素上最近创建的阴影树是 活动的   该元素的影子树 。

     

影子主机的后代不得在其中生成框   格式化树。相反，活动阴影树的内容   生成框，就好像它们是元素的内容一样。

答案 2 :(得分：-1)

看起来这篇引文来自这篇标题为What the Heck is Shadow DOM?

的文章

影子DOM 是 DOM的一部分（但是虚拟DOM是DOM的隐藏副本。对于早先与虚拟DOM的混淆感到抱歉！）。从再次查看此W3 Spec开始，看起来DOM DOM只是一个可重用的DOM片段。浏览器会看到它＆amp;将呈现它的内容。

  

本规范描述了一种将多个DOM树组合成一个层次结构的方法，以及这些树如何在文档中相互交互，从而实现更好的DOM组合。

至少从2006年开始使用.innerHTML＆amp; JavaScript中的模板，用于构建可重用的DOM片段。这不是新技术。它只是在2015年被W3C记录为官方规范。

有趣的是这些CSS属性＆amp;伪选择器，在Shadow DOM上运行，但不是Real DOM的一部分。它们在Composed Trees section的W3 Spec底部描述。

  

:: shadow伪元素

     

/ deep / combinator，替换为＆gt;＆gt;＆gt;   组合子（或阴影穿孔后代组合子）

     

:: content pseudo-element

     

：host伪类和：host（）函数伪类

     

：host-context（）函数伪类

它们会添加到这些选择器中，人们有时会使用这些选择器创建带有插入/指向其他屏幕元素的<div>标记：

::before＆amp; ::after

其他更新：

我在Shadow DOM 101链接找到了更多详细信息。查看“你好我的名字是Bob ... Shellie”的例子（大约在页面的1/2方向），就在这个文本块的正上方...

  

现在我们已经实现了内容和演示的分离。内容在文件中;演示文稿位于Shadow DOM中。当需要渲染时，它们会自动由浏览器保持同步。

......我们可以检查DOM＆amp;看看DOM的影子是什么样的。它看起来像这样，CSS和＆ HTML可以封装在“shadow DOM”元素中，该元素隐藏在<div>标记内。请参阅：https://developer.chrome.com/devtools/docs/settings-files/show-shadow-dom.png

似乎这个想法是封装CSS＆amp; HTML，以便它不会溢出到页面的其他区域。也不允许其他现有/页面上的代码影响封装代码块内部的内容。这个封装的较旧示例将隐藏<iframe>标记，这些标记旨在显示广告，但阻止第三方广告代码在我们非常酷的网页上破坏JS。

以下是一些Shadow DOM链接：

  1. Shadow DOM 101
  2. Shadow DOM 201
  3. Shadow DOM 301
  4. Visualizing Shadow DOM Concepts
相关问题
最新问题