# \<slot>

[web](https://lochiwei.gitbook.io/web/master) ⟩ [component](https://lochiwei.gitbook.io/web/component) ⟩ \<slot>

{% hint style="info" %} <mark style="color:purple;">**`<slot>`**</mark> 是在[自訂元素](https://lochiwei.gitbook.io/web/component/custom-element)內部 [`<template>`](https://lochiwei.gitbook.io/web/component/template) 定義的<mark style="color:yellow;">插槽</mark>，<mark style="color:yellow;">任何</mark>放在[自訂元素](https://lochiwei.gitbook.io/web/component/custom-element)<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](https://lochiwei.gitbook.io/web/component/template/slot/named-slot) (也就是<mark style="color:green;">有</mark><mark style="color:yellow;">名稱</mark>的 <mark style="color:purple;">**`<slot>`**</mark>)。
  {% endhint %}

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

* [named-slot](https://lochiwei.gitbook.io/web/component/template/slot/named-slot "mention")：可<mark style="color:yellow;">控制內容的插入位置</mark>。
* [fallback-content](https://lochiwei.gitbook.io/web/component/template/slot/fallback-content "mention")：[`<slot>`](https://lochiwei.gitbook.io/web/component/template/slot) 的<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> 位置" %}
📁 [自訂元素](https://lochiwei.gitbook.io/web/component/custom-element)的 [\<template>](https://lochiwei.gitbook.io/web/component/template) 中：定義 <mark style="color:purple;">**`<slot>`**</mark> 的位置（也可以放 [named-slot](https://lochiwei.gitbook.io/web/component/template/slot/named-slot "mention")）

```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：在[自訂元素](https://lochiwei.gitbook.io/web/component/custom-element)標籤 (如：<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>](https://lochiwei.gitbook.io/web/component/template) 內所定義的結構決定。
{% endtab %}
{% endtabs %}

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

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/component/template/slot.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.