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

# shadow DOM

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

{% tabs %}
{% tab title="🔰 定義" %}
{% hint style="info" %}
* a "<mark style="color:orange;">**shadow root**</mark>" can be attached to a [custom-element](custom-element "mention"). \
  (and also to \<div>, \<span>, \<nav>, \<header>, \<footer>, \<section>, \<p>, \<blockquote>, \<aside>, \<h1> \~ \<h6>)
* the [custom-element](custom-element "mention") 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](../js/debug/devtools/show-shadow-dom)
{% 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](shadow-dom "mention"), then its [<mark style="color:yellow;">**light DOM**</mark>](light-dom) is <mark style="color:red;">**not displayed**</mark>.
* <mark style="color:yellow;">**styles**</mark> defined beneath a [shadow root](shadow-dom) are <mark style="color:orange;">**private**</mark> to that tree and will <mark style="color:red;">**never**</mark> affect the [light-dom](light-dom "mention") elements on the outside.
* [shadow root](shadow-dom) 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](shadow-dom "mention") <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](shadow-dom "mention") can use [var](../css/var "mention") defined in <mark style="color:yellow;">**light DOM**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [light-dom](light-dom "mention")
* [styles](shadow-dom/styles "mention")
* [events](shadow-dom/events "mention")
* [built-in shadow DOM](../js/debug/devtools/show-shadow-dom)
* [light vs. shadow DOM](shadow-dom/light-dom)
* [shadow root vs. host](shadow-dom/shadow-root)
{% endtab %}

{% tab title="📘 手冊" %}
* [element](../browser/dom/type/element "mention") ⟩&#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](../browser/dom "mention")
* [flattened DOM](slots#flattened-dom)
{% endtab %}
{% endtabs %}

