🔸shadow DOM
a mechanism to encapsulate our web components. The markup and styles inside web components protect it from external DOM manipulation.
browser ⟩ web components ⟩ implement ⟩ shadow DOM
regular DOM children of a shadow host are referred to as the “light DOM”.
style from the document does not affect the shadow tree, but CSS inheritance does.
show shadow DOM for built-in elements in browser, 👉 see: show built-in shadow DOM
shadow roots are usually created in “open” mode (the shadow host has a shadowRoot property).
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.
MDN ⟩ Using shadow DOM ⭐️
Google ⟩ Shadow DOM
Last updated
Was this helpful?