slot

<slot>

这是一项 实验技术

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

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

内容类别	流量内容，措辞内容
允许的内容	透明
标记遗漏	没有，起始和结束标签都是强制性的
允许父母	任何接受短语内容的元素
允许ARIA角色	没有
DOM界面	HTMLSlotElement

属性

该元素包含全局属性。

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

示例

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

<template>与<slot>合作

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

<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>元素创建一个新的<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> 阴影根位置。

添加最后一点风格

画龙点睛：为更多一点点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 }

结果

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

Screenshot	Live sample

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

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

规范

规范	状态	评论
HTML Living Standard该规范中'<slot>'的定义。	Living Standard
DOM在该规范中定义的“插槽”。	Living Standard

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	53	No	No	No	40	10
name	53	No	No	No	40	10

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	53	53	No	No	No	40	10.1
name	53	53	No	No	No	40	10.1