index.md

title	slug	l10n
<slot>：Web 组件插槽元素	Web/HTML/Element/slot	sourceCommit fdd3ac5598c3ddceb71e59949b003936ae99f647

{{HTMLSidebar}}

<slot> HTML 元素是——Web 组件技术套件的一部分——它是一个在 web 组件内部的占位符，你可以使用自己的标记来填充该占位符，从而创建单独的 DOM 树并将其一起呈现。

属性

此元素仅包含全局属性。

• name

  • : 插槽名称。

    **具名插槽**是具有 name 属性的 <slot> 元素。

示例

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

Note

你可以在 element-details（参见在线演示）查看完整示例。此外，你还可以在使用模板和插槽找到相关解释。

技术概要

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

规范

{{Specifications}}

浏览器兼容性

{{Compat}}

参见

• HTML {{HTMLElement("template")}} 元素
• HTML slot 属性
• CSS {{CSSXref("::slotted")}} 伪元素
• CSS 域模块