> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/component/template/slot.md).

# \<slot>

╱🚧 under construction -> default slot

[web](/web/master.md) ⟩ [component](/web/component.md) ⟩ \<slot>

{% hint style="info" %} <mark style="color:purple;">**`<slot>`**</mark> 是在[自訂元素](/web/component/custom-element.md)內部 [`<template>`](/web/component/template.md) 定義的<mark style="color:yellow;">插槽</mark>，<mark style="color:yellow;">任何</mark>放在[自訂元素](/web/component/custom-element.md)<mark style="color:yellow;">標籤</mark>間的<mark style="color:yellow;">最上層</mark>  HTML 元素或文字，會插入 <mark style="color:purple;">**`<slot>`**</mark> 裡面。

* <mark style="color:red;">沒有</mark><mark style="color:yellow;">指定插槽名稱</mark>的，會放入 <mark style="color:orange;">default slot</mark> (也就是<mark style="color:red;">沒有</mark><mark style="color:yellow;">名稱</mark>的 <mark style="color:purple;">**`<slot>`**</mark>)。
* <mark style="color:green;">有</mark><mark style="color:yellow;">指定插槽名稱</mark>的，會放入 [named slot](/web/component/template/slot/named-slot.md) (也就是<mark style="color:green;">有</mark><mark style="color:yellow;">名稱</mark>的 <mark style="color:purple;">**`<slot>`**</mark>)。
  {% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* [named slot](/web/component/template/slot/named-slot.md)：可<mark style="color:yellow;">控制內容的插入位置</mark>。
* [fallback content](/web/component/template/slot/fallback-content.md)：[`<slot>`](/web/component/template/slot.md) 的<mark style="color:yellow;">預設內容</mark>。
  {% endtab %}

{% tab title="💈範例" %}

* [web component (0.0.2)(Gemini)(slot)](https://codepen.io/pegasusroe/pen/GgKEoMm)：基本解說
  {% endtab %}

{% tab title="📘 手冊" %}
\*
{% endtab %}

{% tab title="📗 參考" %}

* Gemini ⟩ [What are slotted nodes?](https://g.co/gemini/share/26bfb2b17093)&#x20;
  {% endtab %}
  {% endtabs %}

## 使用方式 <a href="#how-to" id="how-to"></a>

{% tabs %}
{% tab title="1️⃣ 決定 <slot> 位置" %}
📁 [自訂元素](/web/component/custom-element.md)的 [\<template>](/web/component/template.md) 中：定義 <mark style="color:purple;">**`<slot>`**</mark> 的位置（也可以放 [named slot](/web/component/template/slot/named-slot.md)）

```html
<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>
```

{% endtab %}

{% tab title="2️⃣ 加入 HTML 內容" %}
📁 HTML：在[自訂元素](/web/component/custom-element.md)標籤 (如：<mark style="color:blue;">`<my-component>`</mark>) 中加入 HTML 內容

```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>](/web/component/template.md) 內所定義的結構決定。
{% endtab %}
{% endtabs %}

## **使用 `slotchange` 事件**

當 <mark style="color:purple;">**`<slot>`**</mark> 的<mark style="color:yellow;">內容發生變化</mark>時（如插入或移除 [slotted nodes](/web/component/template/slot/slotted-elements.md) ），就會觸發 [slotchange](/web/component/template/slot/slotchange.md) 這個事件。你可以使用這個事件來監聽 [slotted nodes](/web/component/template/slot/slotted-elements.md) 的變化，並執行相應的操作。

```javascript
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);
  });
  
}
```