html标签slot,slot_标签 | Elements_HTML_参考手册_非常教程

slot

这是一项 实验技术

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

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

内容类别

流量内容，措辞内容

允许的内容

透明

标记遗漏

没有，起始和结束标签都是强制性的

允许父母

任何接受短语内容的元素

允许ARIA角色

没有

DOM界面

HTMLSlotElement

属性

该元素包含全局属性。

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

示例

让我们用元素和元素一起做一个例子。

与合作

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

在其阴影根中创建一个具有命名槽的元素

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

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

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

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 }

<NEED NAME>

NEED DESCRIPTION

Attributes

None

---

元素有几个特点：

有一个

用途和它的name属性，使三个已命名的插槽：

包装在命名插槽元素。

从元素创建一个新的元素

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

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));

}

})

使用具有指定插槽的自定义元素

现在我们来看看 **元素，并在文档中实际使用。

slot

A placeholder inside a web

component that users can fill with their own markup,

with the effect of composing different DOM trees

together.

name

The name of the slot.

template

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.

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

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

只有这两个元素中的第一个引用"attributes"指定的槽。第二个元素缺少对指定槽的引用。"attributes"

第一个元素"attributes"使用

和

子元素的元素引用指定的槽。

添加最后一点风格

画龙点睛：为更多一点点CSS

以及

在我们的文档内容。

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

​

​

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

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

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

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

因为第一有一个

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

规范

规范

状态

评论

HTML Living Standard该规范中''的定义。

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