View in EnglishAlways switch to English

<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 2020年1月.

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

属性

此元素仅包含全局属性。

name

插槽名称。

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

示例

html

<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>        &lt;<slot name="element-name">需要名称</slot>&gt;      </code>      <span><slot name="description">需要描述</slot></span>    </summary>    <div>      <h4>属性</h4>      <slot name="attributes"><p>无</p></slot>    </div>  </details>  <hr /></template>

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

技术概要

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