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"><<slot name="element-name">NEED NAME</slot>></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 |
