๐Ÿ”ธ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