# 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 [**light DOM**](/web/component/light-dom.md) is **not displayed**.
* **styles** defined beneath a [shadow root](/web/component/shadow-dom.md) are **private** to that tree and will **never** affect the [light DOM](/web/component/light-dom.md) elements on the outside.
* [shadow root](/web/component/shadow-dom.md) can define **default styles** for its **host element**, but these will be **overridden** by **light DOM styles**.
{% endhint %}
{% hint style="info" %}
* **elements** in [shadow DOM](/web/component/shadow-dom.md) **will inherit** **font size**, **background color**, ... from the **light DOM**.
* **styles** in [shadow DOM](/web/component/shadow-dom.md) can use [variables](/web/css/var.md) defined in **light DOM**.
{% endhint %}
{% endtab %}
{% tab title="📗 參考" %}
* 📗 [\ & 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)
* [\](/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()
{% 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() ⭐️
-----------------
target the host if it matches a .
*/
: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
...
/*
⭐️ :host-context() ⭐️
-------------------------
select host if it or any of its ancestors matches .
*/
: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 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 對 **``** 做 CSS 格式設定，則**外部的格式**具有**優先權**。
* 我們可以利用這種特性，使用 **:host** 對 **\** 設定**預設格式**，然後在外部的 CSS 中再使用 **custom-element** 設定**自訂格式**。
{% endhint %}
## Topics
* [Styling Slotted Content](/web/component/template/slot/slotted-elements.md#styling-slotted-content)
## Examples
* **:host** - [\](/web/component/examples/custom-dialog.md), [\](/web/component/examples/less-than-user-card-greater-than.md), [\](/web/component/examples/element-details.md)
* **:host()** - [\](/web/component/examples/custom-dialog.md), [\](/web/component/examples/element-details.md)
* **::slotted()** - [\](/web/component/examples/less-than-user-card-greater-than.md), [\](/web/component/examples/element-details.md) 👉 [slotted content](/web/component/template/slot/slotted-elements.md)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://lochiwei.gitbook.io/web/component/shadow-dom/styles.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.