🔸<slot>

web ⟩ component ⟩ <slot>

Web Component 是一個容器，而 <slot> 就像是容器上的插槽，你可以將其他 HTML 元素或文字插入這個插槽。

🔴 主題

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

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

💈範例

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

📘 手冊

用法

1️⃣ 在 template 中定義 <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️⃣ 在 component 標籤中使用 HTML 內容

<my-component> 內的任何 HTML 內容都會被插到 <slot> 的位置：

<my-component>
  <!-- 標籤內的任何 HTML 內容都會被插到 <slot> 的位置 -->
  <h2>This is the slotted content!</h2>
  <p>This is another paragraph inside the slot.</p>
</my-component>

在這個例子中，<h2> 和 <p> 會被插到 <slot> 的位置，最終結果：

<div class="container">
  <p>This is some default text.</p>
  
  <!-- ⭐️ slotted nodes -->
  <h2>This is the slotted content!</h2>
  <p>This is another paragraph inside the slot.</p>
  
  <p>This is more default text.</p>
</div>