🔰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

📘 手冊

📗 參考

控制樣式的方式

::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 變數