<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

浏览器兼容性

另见