Element.slot | Web API

在此页

句法
范例
规范
浏览器兼容性
相关话题

slot 特性为 元素 interface returns the name of the shadow DOM slot the element is inserted in.

A slot is a placeholder inside a web component that users can fill with their own markup (see Using templates and slots 了解更多信息)。

句法

var aString = element.slot
element.slot = aString

值

A DOMString .

范例

In our simple-template example ( see it live ), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text .

当 <my-paragraph> is used in the document, the slot is populated by a slotable element by including it inside the element with a slot attribute with the value my-text . Here is one such example:

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

In our JavaScript file we get a reference to the <span> shown above, then log a reference to the name of the corresponding <slot> 元素。

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

规范

规范	状态	注释
DOM The definition of 'slot' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`slot`	Chrome 53	Edge ≤79	Firefox 63	IE ?	Opera Yes	Safari 10	WebView Android 53	Chrome Android 53	Firefox Android 63	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 6.0

图例

完整支持
兼容性未知 ?

元数据

最后修改： 2019 年 3 月 23 日

在此页

句法

值

范例

规范

浏览器兼容性

图例

相关话题