> 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/styles.md).

# shadow DOM styles

[Web Components](/web/component.md) ⟩ [Shadow DOM](/web/component/shadow-dom.md) ⟩ 

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

* MDN ⟩ 
  * [Using templates and slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots) 
  * CSS ⟩ 
    * [contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) 
    * [::slotted()](https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted)
    * [:host-context()](https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context\(\))
* Google ⟩ 
  * [Resetting inheritable styles in shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=en#reset)
  * Web Component ⟩ [Component-defined styles](https://developers.google.com/web/fundamentals/web-components/shadowdom#host)
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% 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="📗 參考" %}

* 📗 [\<details> & Shadow DOM & Inheritance](https://kittygiraudel.com/2021/08/23/shadow-roots-and-inheritance/)
* 📗 CSSTrick ⟩ [contain](https://css-tricks.com/almanac/properties/c/contain/)
  {% endtab %}

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

* [Slotted Nodes](/web/component/template/slot/slotted-elements.md)
* [\<slot>](/web/component/template/slot.md) ⟩ [slotted node styles](/web/component/template/slot/styles.md)
* [slotted nodes](/web/component/template/slot/slotted-elements.md)
  {% endtab %}
  {% endtabs %}

## :host, :host(), :host-context(), ::slotted() <a href="#pseudo-class" id="pseudo-class"></a>

{% hint style="warning" %}
**:host, :host(), :host-context()** only works in the context of a **shadow root**, you can't use it outside of shadow DOM.
{% endhint %}

{% tabs %}
{% tab title=":host & :host( )" %}

```css
/* ⭐️ select host element (from inside shadow DOM) */
:host {

  /* ⭐️ by default, custom elements are `display: inline` */
  display: block;
  
  /* CSS containment */ 
  contain: content; 
}

:host {
  opacity: 0.4;
  will-change: opacity;
  transition: opacity 300ms ease-in-out;
}

/*
  ⭐️ :host(<selector>) ⭐️
     -----------------
     target the host if it matches a <selector>. 
*/
:host(:hover) {
  opacity: 1;
}

:host([disabled]) { /* style when host has disabled attribute. */
  background: grey;
  pointer-events: none;
  opacity: 0.4;
}

:host(.blue) {
  color: blue; /* color host when it has class="blue" */
}

:host(.pink) > #tabs {
  color: pink; /* color internal #tabs node when host has class="pink". */
}
```

{% endtab %}

{% tab title=":host-context( )" %}

```css
<body class="darktheme">
  <fancy-tabs>
    ...
  </fancy-tabs>
</body>

/*
  ⭐️ :host-context(<selector>) ⭐️
     -------------------------
     select host if it or any of its ancestors matches <selector>.
*/
:host-context(.darktheme) {
  color: white;
  background: black;
}
```

{% endtab %}

{% tab title="::slotted( )" %}

```css
/*
  ⭐️ won't select text node placed into slot (only elements)
*/

/* selects any element placed inside a slot */
::slotted(*) {
  font-weight: bold;
}

/* selects any <span> placed inside a slot */
::slotted(span) {
  font-weight: bold;
}
```

{% endtab %}

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

* 📘 MDN  ⟩ CSS ⟩ [contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
* 📗 CSSTrick ⟩ [contain](https://css-tricks.com/almanac/properties/c/contain/)
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
⭐️ 注意：

* 如果同時在 **shadow DOM** 與 **light DOM** 中分別用 **`:host`** 與 **custom-element** selector 對 **`<custom-element>`** 做 CSS 格式設定，則**外部的格式**具有**優先權**。
* 我們可以利用這種特性，使用 **:host** 對 **\<custom-element>** 設定**預設格式**，然後在外部的 CSS 中再使用 **custom-element** 設定**自訂格式**。
  {% endhint %}

## Topics

* [Styling Slotted Content](/web/component/template/slot/slotted-elements.md#styling-slotted-content)

## Examples

* **:host** - [\<custom-dialog>](/web/component/examples/custom-dialog.md), [\<user-card>](/web/component/examples/less-than-user-card-greater-than.md), [\<element-details>](/web/component/examples/element-details.md)
* **:host()** - [\<custom-dialog>](/web/component/examples/custom-dialog.md), [\<element-details>](/web/component/examples/element-details.md)
* **::slotted()** - [\<user-card>](/web/component/examples/less-than-user-card-greater-than.md), [\<element-details>](/web/component/examples/element-details.md)    👉 [slotted content](/web/component/template/slot/slotted-elements.md)