🔸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

⭐️ 重點

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.

• 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.

🔴 主題

• light DOM

• shadow DOM styles

• shadow DOM events

• built-in shadow DOM

• light vs. shadow DOM

• shadow root vs. host

📘 手冊

• Element ⟩

  • .shadowRoot
  • .attachShadow()
• ShadowRoot
• MDN ⟩ Using shadow DOM ⭐️
• Google ⟩ Shadow DOM

📗 參考

• ​📗 Shadow DOM: A DOM subtree for encapsulated code blocks​
• ​​📗 Shadow DOM concepts (outdated)
• 📗 Open vs. Closed Shadow DOM ⭐️ (結論：closed mode 沒什麼用)
• 📗 Encapsulating Style and Structure with Shadow DOM - CSSTricks

👥 相關

• DOM

• flattened DOM