Light DOM 和 Shadow DOM 的区别

Posted 2023-02-19

【中文标题】Light DOM 和 Shadow DOM 的区别

【英文标题】：Difference between Light DOM and Shadow DOM

【发布时间】：2017-06-24 22:03:39

【问题描述】：

我偶然发现了几次 Light DOM，但无法理解与 Shadow DOM 的区别。如果有人可以提供明确的答案，将不胜感激。

【参考方案1】：

Light DOM 只是 html 元素内的 plain old DOM 树。

该术语仅用于 Web 组件的上下文中，以将其与 Shadow DOM 区分开来。 我想普通的 DOM 被重新定义为 Light 与 Shadow 形成对比。

The specs 称它为 shadowroot 主机的节点树，或 light 树：

影子根总是通过它的宿主连接到另一个节点树。因此，影子树永远不会孤单。影子根的宿主节点树有时也称为光照树。

我称之为普通 DOM :-)

---

Shadow DOM 是添加的 DOM，恢复、掩码或替换普通 DOM，如在article from Google中解释。

渲染的 DOM 可以是 Shadow DOM 和 Light DOM 的组合（通过 <slot> 元素）

注意：在 javascript 中完全填充 Shadow DOM 行为是不可能的，所以 Shadow DOM 填充实际上只处理普通的 DOM 树。

【讨论】：

Google 文章的共享链接有助于理解基础知识。

很好解释。在 2020 年，我发现下面的网页很好地解释了上述主题。 javascript.info/slots-compositionjavascript.info/web-components

还有***.com/questions/61626493/…

【参考方案2】：

您可以说，承载影子根的节点树称为光照树，它可能是 Light DOM 或另一个 Shadow DOM。

在specification.查看此注释

阴影树对应的光照树可以是阴影树本身。