🔸<slot>

╱🚧 under construction -> default slot

web ⟩ component ⟩ <slot>

<slot> 是在自訂元素內部 <template> 定義的插槽，任何放在自訂元素標籤間的最上層 HTML 元素或文字，會插入 <slot> 裡面。

• 沒有指定插槽名稱的，會放入 default slot (也就是沒有名稱的 <slot>)。

• 有指定插槽名稱的，會放入 named slot (也就是有名稱的 <slot>)。

🔴 主題

• named slot：可控制內容的插入位置。

• fallback content：<slot> 的預設內容。

💈範例

• web component (0.0.2)(Gemini)(slot)：基本解說

📘 手冊

📗 參考

• Gemini ⟩ What are slotted nodes?

使用方式

1️⃣ 決定 <slot> 位置

📁 自訂元素的 <template> 中：定義 <slot> 的位置（也可以放 named slot）

<template id="my-component-template">

  <style>
    .container {
      border: 1px solid blue;
      padding: 10px;
    }
  </style>
  
  <div class="container">
    <p>This is some default text.</p>
    
    <!-- ⭐️ 1️⃣ 決定 <slot> 位置 -->
    <slot></slot> 
    
    <p>This is more default text.</p>
  </div>
</template>

2️⃣ 加入 HTML 內容

📁 HTML：在自訂元素標籤 (如：<my-component>) 中加入 HTML 內容

<my-component>
  <!-- ⭐️ 2️⃣ 加入 HTML 內容 -->
  <!-- 沒有指定插槽名稱的，會放入 default slot -->
  <h2>This is the slotted content!</h2>
  <p>This is another paragraph inside the slot.</p>
</my-component>

但最終呈現的結果則由自訂元素 <template> 內所定義的結構決定。

使用 slotchange 事件

當 <slot> 的內容發生變化時（如插入或移除 slotted nodes ），就會觸發 slotchange 這個事件。你可以使用這個事件來監聽 slotted nodes 的變化，並執行相應的操作。

constructor() {

  super();
  let root = this.attachShadow({ mode: 'open' });  // root == this.shadowRoot
  // ... (其他程式碼)

  // ⭐️ "slotchange" event
  const slot = root.querySelector('slot');
  
  slot.addEventListener('slotchange', (event) => {
    console.log('Slot 內容發生變化！');
    const slottedNodes = slot.assignedNodes();
    console.log('Slotted nodes:', slottedNodes);
  });
  
}