> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/component/shadow-dom.md).

# shadow DOM

a mechanism to encapsulate our web components. The markup and styles inside web components protect it from external DOM manipulation.

[browser](/web/browser.md) ⟩ [web components](/web/component.md) ⟩ [implement](/web/component/implement.md) ⟩ shadow DOM

{% tabs %}
{% tab title="🔰 定義" %}
{% hint style="info" %}

* a "<mark style="color:orange;">**shadow root**</mark>" can be attached to a [custom element](/web/component/custom-element.md). \
  (and also to \<div>, \<span>, \<nav>, \<header>, \<footer>, \<section>, \<p>, \<blockquote>, \<aside>, \<h1> \~ \<h6>)
* the [custom element](/web/component/custom-element.md) is called a "<mark style="color:purple;">**shadow host**</mark>".
  {% endhint %}

{% hint style="success" %} <mark style="color:yellow;">**regular**</mark> DOM <mark style="color:yellow;">**children**</mark> of a <mark style="color:purple;">**shadow host**</mark> are referred to as the “<mark style="color:orange;">**light DOM**</mark>”.
{% endhint %}

* 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](/web/js/debug/devtools/show-shadow-dom.md)
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %} <mark style="color:yellow;">**shadow roots**</mark> are usually created in “<mark style="color:orange;">**open**</mark>” mode (the <mark style="color:purple;">**shadow host**</mark> has a <mark style="color:blue;">`shadowRoot`</mark> property).
{% endhint %}

{% hint style="warning" %}

* if an element has [shadow DOM](/web/component/shadow-dom.md), then its [<mark style="color:yellow;">**light DOM**</mark>](/web/component/light-dom.md) is <mark style="color:red;">**not displayed**</mark>.
* <mark style="color:yellow;">**styles**</mark> defined beneath a [shadow root](/web/component/shadow-dom.md) are <mark style="color:orange;">**private**</mark> to that tree and will <mark style="color:red;">**never**</mark> affect the [light DOM](/web/component/light-dom.md) elements on the outside.
* [shadow root](/web/component/shadow-dom.md) can define <mark style="color:yellow;">**default styles**</mark> for its <mark style="color:orange;">**host element**</mark>, but these will be <mark style="color:red;">**overridden**</mark> by <mark style="color:yellow;">**light DOM styles**</mark>.
  {% endhint %}

{% hint style="info" %}

* <mark style="color:yellow;">**elements**</mark> in [shadow DOM](/web/component/shadow-dom.md) <mark style="color:yellow;">**will inherit**</mark> <mark style="color:green;">**font size**</mark>, <mark style="color:green;">**background color**</mark>, ... from the <mark style="color:yellow;">**light DOM**</mark>.
* <mark style="color:yellow;">**styles**</mark> in [shadow DOM](/web/component/shadow-dom.md) can use [variables](/web/css/var.md) defined in <mark style="color:yellow;">**light DOM**</mark>.
  {% endhint %}
  {% endtab %}

{% tab title="🔴 主題" %}

* [light DOM](/web/component/light-dom.md)
* [shadow DOM styles](/web/component/shadow-dom/styles.md)
* [shadow DOM events](/web/component/shadow-dom/events.md)
* [built-in shadow DOM](/web/js/debug/devtools/show-shadow-dom.md)
* [light vs. shadow DOM](/web/component/shadow-dom/light-dom.md)
* [shadow root vs. host](/web/component/shadow-dom/shadow-root.md)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Element](/web/browser/dom/type/element.md) ⟩&#x20;
  * [.shadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot)
  * [.attachShadow()](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow)
* [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)
* MDN ⟩ [Using shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) ⭐️
* Google ⟩ [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] ​📗 [Shadow DOM: A DOM subtree for encapsulated code blocks](https://www.ionos.co.uk/digitalguide/websites/web-development/shadow-dom/)​
* [ ] ​​📗 [Shadow DOM concepts](https://polymer-library.polymer-project.org/2.0/docs/devguide/shadow-dom) (outdated)
* [ ] 📗 [Open vs. Closed Shadow DOM](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af) ⭐️ (結論：**closed** mode 沒什麼用)
* [ ] 📗 [Encapsulating Style and Structure with Shadow DOM](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/) - CSSTricks
  {% endtab %}

{% tab title="👥 相關" %}

* [DOM](/web/browser/dom.md)
* [flattened DOM](/web/component/shadow-dom/slots.md#flattened-dom)
  {% endtab %}
  {% endtabs %}