🔸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
a "shadow root" can be attached to a custom element. (and also to <div>, <span>, <nav>, <header>, <footer>, <section>, <p>, <blockquote>, <aside>, <h1> ~ <h6>)
the custom element is called a "shadow host".
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
Last updated