slot

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

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

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

属性

该元素包含全局属性。

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 }

结果

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

Screenshot	Live sample

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

即使<element-details>文档中元素的实例不直接使用该<details>元素，也会使用它们进行渲染，<details>因为影子根会导致它们被填充。
在呈现的<details>输出中，<element-details>元素中的内容将从影子根中填充指定的位置。换句话说，来自<element-details>元素的DOM树与影子根的内容一起构成。
对于这两个<element-details>元素，Attributes标题会自动从指定插槽位置之前的影子根目录添加"attributes"。
因为第一<element-details>有一个<dl>其中明确参考元件"attributes"命名槽从其影子根，的该内容<dl>代替"attributes"从命名槽阴影根。
因为第二个<element-details>没有明确地"attributes"从它的影子根中引用指定的槽，所以它的该指定槽的内容被来自影子根的默认内容填充。

规范

规范	状态	评论
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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18