<slot>:Web 组件槽元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<slot> HTML 元素（Web 组件 技术套件的一部分）是 Web 组件内的占位符，你可以用自己的标记填充该占位符，这使你可以创建单独的 DOM 树并将它们一起呈现。

¥The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

属性

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

name

插槽的名称。

命名槽是具有 name 属性的 <slot> 元素。

示例

¥Examples

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 处看到这个完整的示例（参见 实时运行）。另外，你可以在 使用模板和插槽 找到解释。

¥Note: You can see this complete example in action at element-details (see it running live). In addition, you can find an explanation at Using templates and slots.

技术总结

¥Technical summary

内容类别 流量内容, 措辞内容
允许的内容 透明的
事件 slotchange
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 措辞内容 的元素
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLSlotElement

规范

Specification
HTML Standard
# the-slot-element
DOM Standard
# shadow-tree-slots

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also