🔰how to style?

╱🚧 under construction -> slotted nodes

web ⟩ component ⟩ slot ⟩ how to style ?

👥 相關

• shadow DOM styles

• slotted nodes

📘 手冊

用法

1️⃣ 使用 pseudo-element ::slotted()

::slotted() 允許你在 web component 的 shadow DOM 內部選擇 slotted nodes，這是控制 slotted nodes 樣式最直接的方法：

<template id="my-component-template">
  <style>
    
    /* slotted <p> */
    ::slotted(p) { 
      text-decoration: underline;
    }
    
    /* all slotted nodes */
    ::slotted(*) { 
        font-weight: bold;
    }
    
    /* all slotted nodes with class="highlight" */
    ::slotted(.highlight) { 
        background-color: yellow;
    }
  </style>
  <slot></slot>
</template>

⚠️ 但它有一些限制：

• 只能設定 slotted nodes 一部分樣式，例如：font、text、margin、padding、border、background 等等。一些較複雜的樣式可能無法正常運作，例如 display、float、width、height 等。

• 無法使用 ::slotted() 選擇 slotted nodes 的後代元素。例如，::slotted(p span) 是無效的。

2️⃣ 🚧

🚧