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

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

语法

var aString = element.slot
element.slot = aString

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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 53Edge ? Firefox ? IE ? Opera ? Safari Full support 10WebView Android Full support 53Chrome Android Full support 53Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
 

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,