需要帮助理解Shadow DOM

Question

阅读有关Shadow DOM的文章和教程,我遇到了一个让我感到困惑的描述:

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

那么影子树不是DOM树的一部分？但浏览器仍会看到它并呈现其内容？

Answer 1

我认为理解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的用武之地:在内部,浏览器用input[type=range]树替换DOM中的每个ocurence

input[range]
- bar
- thumb

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

这里可以找到更多的例子和更全面的解释:什么是暗影DOM？

Answer 2

来自Shadow DOM规范,

一个文档树是一个节点树,其根结点是一个文档.

任何元素都可以托管零个或一个关联的节点树,称为 影子树.

一个影子主机是承载一个影子树的元素.

甲阴影根是一个影子树的根节点.

一树树的节点树的树.

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

是的,渲染阴影内容而不是CSS范围中定义的元素的后代:

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

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