<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 树并将其一起呈现。

属性

此元素仅包含全局属性

name

插槽名称。

具名插槽是具有 name 属性的 <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">需要名称</slot>&gt;
      </code>
      <span class="desc"><slot name="description">需要描述</slot></span>
    </summary>
    <div class="attributes">
      <h4>属性</h4>
      <slot name="attributes"><p></p></slot>
    </div>
  </details>
  <hr />
</template>

备注: 你可以在 element-details(参见在线演示)查看完整示例。此外,你还可以在使用模板和插槽找到相关解释。

技术概要

内容分类 流式内容短语内容
允许的内容 透明内容
事件 slotchange
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
隐含的 ARIA 角色 没有对应的角色
允许的 ARIA 角色 没有允许的 role
DOM 接口 HTMLSlotElement

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
slot
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见