<slot>

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

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

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

属性

此元素有全局属性

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

示例

<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>

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

规范

Specification Status Comments
HTML Living Standard
<slot>
Living Standard
DOM
Slots
Living Standard

浏览器兼容性

BCD tables only load in the browser