<slot>

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.

备注: 本翻译的一些术语参考了Vuejs-中文页面。

HTML <slot> 元素,作为 Web Component 技术套件的一部分,是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充,这样你就可以创建单独的 DOM 树,并将它与其他的组件组合在一起。

Content categories Flow content, phrasing content
Permitted content Transparent
Events slotchange (en-US)
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parents Any element that accepts phrasing content
Permitted ARIA roles None
DOM interface HTMLSlotElement

属性

此元素有全局属性

name

插槽的名字。拥有 name 属性的插槽叫具名插槽

示例

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
      >
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

备注: 你可以在 element-details (see it running live) 找到这个示例的完整演示版。另外,你也可以在Using templates and slots这里找到具体的解释。

规范

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

浏览器兼容性

BCD tables only load in the browser