这是一项 实验技术

在使用此产品之前，请仔细检查浏览器兼容性表。

Web组件技术套件的HTML<slot>元素 - 是Web组件中的一个占位符，您可以使用自己的标记填充该标记，从而可以创建单独的DOM树并将它们展示在一起。

属性

该元素包含全局属性。

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

示例

让我们用<slot>元素和<template>元素一起做一个例子。

<template>与<slot>合作

以下代码片段集展示了如何将<slot>元素与<template>元素和一些JavaScript 一起使用来：

• <element-details>在其阴影根中创建一个具有命名槽的元素

• <element-details>以这样一种方式设计元素：在文档中使用时，元素的内容与其阴影根的内容一起构成- 也就是说，元素内容的片段用于填充其阴影根中的命名空位

使用<template>中的<slot>生成一个带有命名槽的文档片段

首先让我们使用<slot>元素中的<template>元素来创建一个新的“元素细节模板” 文档片段，其中包含一些命名的插槽。

<template id="element-details-template">  <style>
  details {font-family: "Open Sans Light",Helvetica,Arial}  .name {font-weight: bold; color: #217ac0; font-size: 120%}
  h4 { margin: 10px 0 -8px 0; }
  h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
  h4 span { border: 1px solid #cee9f9; border-radius: 4px }
  h4 span { color: white }  .attributes { margin-left: 22px; font-size: 90% }  .attributes p { margin-left: 16px; font-style: italic }  </style>  <details>    <summary>      <span>        <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>        <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>      </span>    </summary>    <div class="attributes">      <h4><span>Attributes</span></h4>      <slot name="attributes"><p>None</p></slot>    </div>  </details>  <hr></template>

<template>元素有几个特点：

• <template>有一个<style>具有一组的作用域只是文件片段的CSS样式元素<template>造成的。

• <template>用途<slot>和它的name属性，使三个已命名的插槽：

• <slot name="element-name">

• <slot name="description">

• <slot name="attributes">

• <template>包装在命名插槽<details>元素。

从<template>元素创建一个新的<element-details>元素

接下来，让我们创建一个名为的新自定义元素，<element-details>并使用Element.attachShadow它作为其阴影根，附加到我们使用<template>上述元素创建的文档片段。

customElements.define('element-details',  class extends HTMLElement {    constructor() {      super();      var template = document        .getElementById('element-details-template')        .content;      const shadowRoot = this.attachShadow({mode: 'open'})        .appendChild(template.cloneNode(true));  }})

使用具有指定插槽的<element-details>自定义元素

现在我们来看看<element-details** > **元素，并在文档中实际使用。

<element-details>  <span slot="element-name">slot</span>  <span slot="description">A placeholder inside a web
    component that users can fill with their own markup,    with the effect of composing different DOM trees
    together.</span>  <dl slot="attributes">    <dt>name</dt>    <dd>The name of the slot.</dd>  </dl></element-details><element-details>  <span slot="element-name">template</span>  <span slot="description">A mechanism for holding client-
    side content that is not to be rendered when a page is
    loaded but may subsequently be instantiated during
    runtime using JavaScript.</span></element-details>

关于该片段，请注意以下几点：

• 片段有两个<element-details>元素实例，它们都使用该slot属性来引用指定的位置，"element-name"然后"description"放入<element-details> 阴影根位置。

• 只有这两个<element-details>元素中的第一个引用"attributes"指定的槽。第二个元素缺少对指定槽的引用。<element-details>"attributes"

• 第一个<element-details>元素"attributes"使用<dl>带有<dt>和<dd>子元素的元素引用指定的槽。

添加最后一点风格

画龙点睛：为更多一点点CSS <dl>，<dt>以及<dd>在我们的文档内容。

  dl { margin-left: 6px; }
  dt { font-weight: bold; color: #217ac0; font-size: 110% }
  dt { font-family: Consolas, "Liberation Mono", Courier }
  dd { margin-left: 16px }

结果

最后，让我们将所有代码片段放在一起，看看呈现的结果是什么样子。

关于渲染结果，请注意以下几点：

• 即使<element-details>文档中元素的实例不直接使用该<details>元素，也会使用它们进行渲染，<details>因为影子根会导致它们被填充。

• 在呈现的<details>输出中，<element-details>元素中的内容将从影子根中填充指定的位置。换句话说，来自<element-details>元素的DOM树与影子根的内容一起构成。

• 对于这两个<element-details>元素，Attributes标题会自动从指定插槽位置之前的影子根目录添加"attributes"。

• 因为第一<element-details>有一个<dl>其中明确参考元件"attributes"命名槽从其影子根，的该内容<dl>代替"attributes"从命名槽阴影根。

• 因为第二个<element-details>没有明确地"attributes"从它的影子根中引用指定的槽，所以它的该指定槽的内容被来自影子根的默认内容填充。

规范

浏览器兼容性