译者注: 本翻译的一些术语参考了Vuejs-中文页面。
HTML <slot>
元素 ,作为 Web Components 技术套件的一部分,是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充,这样您就可以创建单独的DOM树,并将它与其它的组件组合在一起。
Content categories | Flow content, phrasing content |
---|---|
Permitted content | Transparent |
Events | slotchange |
Tag omission | 不允许,开始标签和结束标签都不能省略。 |
Permitted parents | Any element that accepts phrasing content |
Permitted ARIA roles | None |
DOM interface | HTMLSlotElement |
属性
此元素有全局属性。
name
- 插槽的名字
- 拥有name属性的插槽叫具名插槽 。
示例
<template id="element-details-template"> <style> details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-size: 120% } h4 { margin: 10px 0 -8px 0; background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <code class="name"><<slot name="element-name">NEED NAME</slot>></code> <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> </summary> <div class="attributes"> <h4>Attributes</h4> <slot name="attributes"><p>None</p></slot> </div> </details> <hr> </template>
Note: 您可以在 element-details (see it running live)找到这个示例的完整演示版。另外,您也可以在Using templates and slots这里找到具体的解释。
规范
Specification | Status | Comments |
---|---|---|
HTML Living Standard <slot> |
Living Standard | |
DOM Slots |
Living Standard |
浏览器兼容性
The compatibility table in 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
slot | Chrome Full support 53 | Edge No support No | Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10 | WebView Android Full support 53 | Chrome Android Full support 53 | Firefox Android
Full support
63
| Opera Android Full support 41 | Safari iOS Full support 10 | Samsung Internet Android Full support 6.0 |
name | Chrome Full support 53 | Edge No support No | Firefox
Full support
63
| IE No support No | Opera Full support 40 | Safari Full support 10 | WebView Android Full support 53 | Chrome Android Full support 53 | Firefox Android
Full support
63
| Opera Android Full support 41 | Safari iOS Full support 10 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.