Light DOM 和 Shadow DOM 的区别 [英] Difference between Light DOM and Shadow DOM

问题描述

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

I stumbled a couple of times into this Light DOM thing but wasn't able to understand the difference with Shadow DOM. If someone out there could provide a clear answer it would be much appreciated.

推荐答案

Light DOM 只是 HTML 元素内的普通 DOM 树.

The Light DOM is simply the plain old DOM tree inside a HTML element.

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

The term is only used in the context of web components to distinguish it from the Shadow DOM. I suppose the normal DOM was redefined as Light in contrast with Shadow.

规范称它为shadowroot主机的节点树，或光树:

一个影子根总是通过它的宿主附加到另一个节点树上.因此，影子树永远不会孤单.影子根宿主的节点树有时被称为光树.

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 :-)

I call it the normal DOM :-)

Shadow DOM 是添加的 DOM，它恢复、屏蔽或替换普通 DOM，如来自 Google 的文章中对此进行了解释.

The Shadow DOM is the added DOM that recovers, masks, or replaces the normal DOM, as explained in the article from Google.

渲染的DOM可以是Shadow DOM和Light DOM的组合(通过元素)

The rendered DOM can be a combination of the Shadow DOM and the Light DOM (through <slot> elements)

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

Note: it's not possible to completely polyfill the Shadow DOM behaviour in JavaScript, so Shadow DOM polyfills actually deal with normal DOM trees only.

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