<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 表格仅在浏览器中加载

另请参阅