🔰slotted node styles

╱🚧 under construction -> CSS 繼承

web ⟩ component ⟩ slot ⟩ slotted node styles

slotted nodes 雖然是插入 <slot> 的節點，但卻屬於 light DOM 的一部分，無法使用 shadow DOM 的樣式，不過可以用 ::slotted() 這個 pseudo-element 來規範樣式 。

👥 相關

• shadow DOM styles

• slotted nodes

• pseudo-element

📘 手冊

• MDN ⟩ CSS ⟩ Pseudo-elements

📗 參考

• Gemini ⟩ How to style slotted nodes?

控制樣式的方式

::slotted

📁 <template> 內部 CSS：用::slotted() (pseudo-element)

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

⚠️ 但 ::slotted() 有限制：

• 只能設定部分樣式，如：font、text、margin、padding、border、background 等。

• 較複雜的樣式可能無法運作，如： display、float、width、height 等。

• 無法選擇後代元素。如：::slotted(p span) 是無效的。

CSS 繼承

📁 外部 CSS：slotted nodes 會繼承外部的 CSS 樣式

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

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

CSS 變數

📁 <template> 內部 CSS：

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

📁 外部 CSS：

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

嚴格上說來，這也是一種 CSS 繼承。