<slot>: Web Component 的 Slot 元素

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

<slot> HTML 元素 — Web Components 技術套件的一部分 — 是 Web Component 內部的一個佔位符，您可以用自己的標記填充它，從而建立獨立的 DOM 樹並將它們組合在一起呈現。

屬性

name: Slot 的名稱。當 Slot 的包含元件被渲染時，Slot 會用具有匹配 slot 屬性的自定義元素的子元素來渲染。一個命名 Slot 是一個帶有 name 屬性的 <slot> 元素。未命名 Slot 的名稱預設為空字串。名稱在每個 shadow root 中應該是唯一的：如果您有兩個同名的 Slot，所有具有匹配 slot 屬性的元素都將被分配到第一個同名 Slot。

示例

html

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", "Helvetica", "Arial", sans-serif;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <code class="name">
        &lt;<slot name="element-name">NEED NAME</slot>&gt;
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

注意：您可以在 element-details 中看到這個完整的示例（也可以線上執行）。此外，您可以在使用模板和 Slot 中找到相關的解釋。

技術摘要

內容類別	流內容，短語內容
允許內容	透明
事件	`slotchange`
標籤省略	無，起始標籤和結束標籤都必須存在。
允許父級	接受短語內容的任何元素
隱式 ARIA 角色	沒有對應的角色
允許的 ARIA 角色	不允許 `role`
DOM 介面	`HTMLSlotElement`

規範

規範
HTML # the-slot-element
DOM # shadow-tree-slots

瀏覽器相容性

另見

HTML <template> 元素
HTML slot 屬性
CSS ::slotted 偽元素
CSS :has-slotted 偽類
CSS 作用域模組

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年10月13日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題