<slot>: 網頁元件 Slot 元素

基線 廣泛可用

此功能已經非常成熟，並在許多裝置和瀏覽器版本上都能正常執行。它自 2020 年 1 月.

報告反饋

屬性

**<slot>** HTML 元素是 網頁元件 技術套件的一部分，它是在網頁元件中充當佔位符，您可以用自己的標記填充它，這使得您可以建立單獨的 DOM 樹並將它們組合在一起呈現。

此元素包括 全域性屬性。

name

槽的名稱。

示例

**命名槽** 是具有 name 屬性的 <slot> 元素。
<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 中檢視完整的示例（線上執行）。此外，您可以在 使用模板和插槽 中找到解釋。

技術總結

內容類別 流動內容，短語內容
允許的內容 透明的
事件 slotchange
標籤省略 無，開始和結束標籤都是必需的。
允許的父元素 任何接受 短語內容 的元素
隱式 ARIA 角色 沒有相應的角色
允許的 ARIA 角色 不允許使用 role
DOM 介面 HTMLSlotElement

規範

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

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱