需要帮助了解Shadow DOM [英] Need help understanding the Shadow DOM

问题描述

阅读关于Shadow DOM的文章和教程，我遇到了一个让我感到困惑的描述：

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

所以一个Shadow树不是DOM树的一部分？但浏览器仍然会看到它并显示内容？

解决方案

从

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

是的，阴影内容被渲染而不是元素的后代，如 CSS Scoping ：

元素上最近创建的影子树是 em> active
shadow tree 。

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

Reading through articles and tutorials about the Shadow DOM, I came across a description which confused me a bit:

"Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree."

So a Shadow tree is not part of the DOM tree? But the browser will still see it and render its contents?

解决方案

From the Shadow DOM spec,

A document tree is a node tree whose root node is a document.

Any element can host zero or one associated node trees, called a shadow tree.

A shadow host is an element that hosts one shadow tree.

A shadow root is the root node of a shadow tree.

A tree of trees is a tree of node trees.

Then, yes, shadow trees are outside the document tree, but they are still linked forming a tree of trees.

And yes, the shadow contents are rendered instead of the descendants of the element, as defined in CSS Scoping:

The most recently-created shadow tree on an element is the active shadow tree for that element.

The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.

这篇关于需要帮助了解Shadow DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！