🔸named slot

web ⟩ component ⟩ slot ⟩ named slot

有命名的 <slot> 稱為 named slot，可控制內容的插入位置。如：

<!-- 1️⃣ 定名：在 <template> 內部定義 -->
<slot name="header"></slot>

<!-- 2️⃣ 指名：在外部 HTML 使用 -->
<my-component>
    <h1 slot="header">This is the header!</h1>
</my-component>

👥 相關

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

• <template>：定義 <slot> 的地方。

📘 手冊

用法

1️⃣ 定名

📁 <template> 內部結構：定義具名插槽 (named slot) 與預設插槽

<template id="my-component-template">
  <div class="container">
    
    <!-- ⭐️ named slot: header -->
    <slot name="header"></slot>
    
    <div class="content">
    
      <!-- ⭐️ 沒有名字的就是「預設插槽」(default slot) -->
      <slot></slot> 
      
      <p>This is more default text inside content.</p>
    </div>
    
    <!-- ⭐️ named slot: footer -->
    <slot name="footer"></slot>
    
  </div>
</template>

2️⃣ 指名

📁 外部 HTML：指名要插入的插槽

<my-component>
  
  <!-- ⭐️ 指名要插入的 slot -->
  <h1 slot="header">This is the header!</h1>
  
  <!-- ⭐️ 沒指名的會被放到 unnamed slot (default slot) -->
  <p>This is the main content.</p>
  
  <!-- ⭐️ 指名要插入的 slot -->
  <p slot="footer">This is the footer!</p>
  
</my-component>