๐Ÿ”ธ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 variables defined in light DOM.

Last updated