<slot> - HTML（超文本标记语言） 编辑

译者注： 本翻译的一些术语参考了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

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.