🔸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

⭐️ 重點

🔴 主題

📘 手冊

📗 參考

👥 相關