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

# slotted node styles

╱🚧 under construction -> CSS 繼承

[web](/web/master.md) ⟩ [component](/web/component.md) ⟩ [slot](/web/component/template/slot.md) ⟩ slotted node styles 

{% hint style="info" %}
[slotted nodes](/web/component/template/slot/slotted-elements.md) 雖然是插入 [`<slot>`](/web/component/template/slot.md) 的節點，但卻屬於 [light DOM](/web/component/light-dom.md) 的一部分，無法使用 [shadow DOM](/web/component/shadow-dom.md) 的樣式，不過可以用 <mark style="color:blue;">`::slotted()`</mark> 這個 [pseudo-element](/web/css/selectors/pseudo-element.md) 來規範樣式 。
{% endhint %}

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

* [shadow DOM styles](/web/component/shadow-dom/styles.md)
* [slotted nodes](/web/component/template/slot/slotted-elements.md)
* [pseudo-element](/web/css/selectors/pseudo-element.md)
  {% endtab %}

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

* MDN ⟩ [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
  {% endtab %}

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

* Gemini ⟩ [How to style slotted nodes?](https://g.co/gemini/share/43c7a1cb0b74)&#x20;
  {% endtab %}
  {% endtabs %}

## 控制樣式的方式 <a href="#hot-to" id="hot-to"></a>

{% tabs %}
{% tab title="::slotted" %}
📁 [\<template>](/web/component/template.md) <mark style="color:green;">內部</mark> CSS：用<mark style="color:blue;">`::slotted()`</mark> ([pseudo-element](/web/css/selectors/pseudo-element.md))&#x20;

```html
<template id="my-component-template">
  
  <style>
    /* ⭐️ slotted: <p> element */
    ::slotted(p) { ... }
    
    /* ⭐️ slotted: all nodes */
    ::slotted(*) { ... }
    
    /* ⭐️ slotted:  class="highlight" */
    ::slotted(.highlight) { ... }
  </style>
  
  <slot></slot>
</template>
```

{% hint style="warning" %}
:warning: 但 <mark style="color:blue;">`::slotted()`</mark> 有限制：

* 只能設定<mark style="color:yellow;">部分樣式</mark>，如：<mark style="color:blue;">`font`</mark>、<mark style="color:blue;">`text`</mark>、<mark style="color:blue;">`margin`</mark>、<mark style="color:blue;">`padding`</mark>、<mark style="color:blue;">`border`</mark>、<mark style="color:blue;">`background`</mark> 等。
* 較<mark style="color:yellow;">複雜的樣式</mark>可能<mark style="color:red;">無法</mark>運作，如： <mark style="color:red;">`display`</mark>、<mark style="color:red;">`float`</mark>、<mark style="color:red;">`width`</mark>、<mark style="color:red;">`height`</mark> 等。
* <mark style="color:red;">無法</mark>選擇<mark style="color:yellow;">後代元素</mark>。如：<mark style="color:red;">`::slotted(p span)`</mark> 是<mark style="color:red;">無效</mark>的。
  {% endhint %}
  {% endtab %}

{% tab title="CSS 繼承" %}
📁 <mark style="color:red;">外部</mark> CSS：[slotted nodes](/web/component/template/slot/slotted-elements.md) 會<mark style="color:yellow;">繼承</mark><mark style="color:red;">外部</mark><mark style="color:yellow;">的 CSS 樣式</mark>

```markup
<style>
  /* 選擇 my-component 內的所有 <p> 元素（不是直接子元素也包含） */
  /* ⭐️ ::slotted(p) 只能選擇 `my-component > p` ❗         */
  my-component p { ... }

    /* 選擇 <my-component> 的直接子元素，也就是 slotted nodes */
    /* 相當於 ::slotted(*) */
    my-component > * { ... }
</style>
```

{% endtab %}

{% tab title="CSS 變數" %}
📁 [\<template>](/web/component/template.md) <mark style="color:green;">內部</mark> CSS：

```html
<template id="my-component-template">
  <style>
    /* :host 選擇 component 本身 */
    :host { 
      /* ⭐️ 內部定義要使用的 CSS 變數 */
      --text-color: blue; 
    }
  </style>
  <slot></slot>
</template>
```

📁 <mark style="color:red;">外部</mark> CSS：

```css
my-component p {
  /* ⭐️ 外部使用已定義的 CSS 變數 */
  color: var(--text-color); /* CSS 會使用定義在 :host 的變數 */
}
```

嚴格上說來，這也是一種 <mark style="color:orange;">CSS 繼承</mark>。
{% endtab %}
{% endtabs %}