Element.slot

Element接口的slot属性会返回已插入元素所在的Shadow DOM slot的名称。

Slot是存在于web component内部的占位符,用户可以通过slot属性在web component的内部插入自定义的标记文本。(详见Using templates and slots

语法

var aString = element.slot
element.slot = aString

A DOMString.

示例

在示例 simple-template example (在线查看)中,我们创建了一个简单的自定义元素叫做 <my-paragraph> ,并为它添加了shadow root,然后使用一个包含以 my-text为名称的slot的template来填充它。

当 <my-paragraph> 在文档中被使用时,slot标签中的内容会被填充到拥有slot="my-text"属性的元素之中,我们称这种元素为slotable element。(事实上可以看作是拥有slot属性的元素被填充到了template中有<slot>标签存在的地方)请看下面的示例:

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

在Javascript代码中我们获取到上面代码中的span的引用,然后将对应的 <slot> 元素的引用的名称打印在控制台中。

let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.slot); // logs 'my-text'

说明

Specification Status Comment
Shadow DOM
slot
Obsolete Initial definition.

兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 53.0 ? ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 53.0 ? ? ? ? ? 53.0

文档标签和贡献者

此页面的贡献者: Louis-7, dxc111, Ahhaha233, maicss, xiaobudongzhang
最后编辑者: Louis-7,