非常教程

HTML参考手册

标签 | Elements

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

HTML

超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。