光 DOM 和阴影 DOM 之间的差异

Difference between Light DOM and Shadow DOM

我偶然发现了这个 Light DOM 东西几次,但无法理解它与 Shadow DOM 的区别。如果有人能提供明确的答案,将不胜感激。

Light DOM 只是 普通的旧 DOM 树 HTML元素。

该术语仅在 Web 组件的上下文中使用,以区别于阴影 DOM。 我想正常的 DOM 被重新定义为 LightShadow 形成对比。

The specs 将其称为 shadowroot 主机的节点树,或 light 树:

A shadow root is always attached to another node tree through its host. A shadow tree is therefore never alone. The node tree of a shadow root’s host is sometimes referred to as the light tree.

我称之为正常 DOM :-)


阴影DOM恢复的DOM,掩码,或 替换 正常的 DOM,如 article from Google.

中所述

渲染的DOM可以是ShadowDOM和LightDOM的组合(通过<slot>个元素)

注意:不可能完全填充 JavaScript 中的 Shadow DOM 行为,因此 Shadow DOM polyfill 实际上处理正常DOM 只有树。

你可以说,承载影子根的节点树被称为光树,它可能是 Light DOM 或另一个 Shadow DOM 还有。

specification.

中查看此注释

A shadow tree’s corresponding light tree can be a shadow tree itself.