light DOM

browser ⟩ web components ⟩ implement ⟩ shadow DOM ⟩ light DOM

regular DOM children of a shadow host are referred to as the “light DOM”.

⭐️ 重點

• if an element has shadow DOM, then its light DOM is not displayed.

• styles defined beneath a shadow root are private to that tree and will never affect the light DOM elements on the outside.

• shadow root can define default styles for its host element, but these will be overridden by light DOM styles.

• elements in shadow DOM will inherit font size, background color, ... from the light DOM.

• styles in shadow DOM can use CSS Variables defined in light DOM.

Second Tab