在此页

• 属性
• 范例
• 规范
• 浏览器兼容性
• 相关话题

HTML <slot> element —part of the Web 组件 technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

内容类别	流内容 , 措词内容
准许内容	Transparent
事件	slotchange
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts 措词内容
Implicit ARIA role	无对应角色
Permitted ARIA roles	No role permitted
DOM 接口	HTMLSlotElement

属性

此元素包括 全局属性 .

名称

The slot's name.

A named slot 是 <slot> element with a 名称 属性。

范例

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

注意 : You can see this complete example in action at element-details (see it running live ). In addition, you can find an explanation at Using templates and slots .

规范

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

浏览器兼容性

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. 更新 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 完整支持 63 不支持 59 — 63 Disabled Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 ? — 59 Disabled Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true ) 和 preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 40	Safari 完整支持 10	WebView Android 完整支持 53	Chrome Android 完整支持 53	Firefox Android 完整支持 63 完整支持 63 不支持 59 — 63 Disabled Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 ? — 59 Disabled Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true ) 和 preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 41	Safari iOS 完整支持 10	Samsung Internet Android 完整支持 6.0
名称	Chrome 完整支持 53	Edge 完整支持 79	Firefox 完整支持 63 完整支持 63 不支持 59 — 63 Disabled Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 ? — 59 Disabled Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true ) 和 preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 40	Safari 完整支持 10	WebView Android 完整支持 53	Chrome Android 完整支持 53	Firefox Android 完整支持 63 完整支持 63 不支持 59 — 63 Disabled Disabled From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 ? — 59 Disabled Disabled Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true ) 和 preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 41	Safari iOS 完整支持 10	Samsung Internet Android 完整支持 6.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： Apr 12, 2020

相关话题

1. <content>
2. <shadow>
3. <slot>
4. <template>
5. HTML 元素

   1. A
      1. <a>
      2. <abbr>
      3. <acronym>
      4. <address>
      5. <applet>
      6. <area>
      7. <article>
      8. <aside>
      9. <audio>
   2. B
      1. <b>
      2. <base>
      3. <basefont>
      4. <bdi>
      5. <bdo>
      6. <bgsound>
      7. <big>
      8. <blink>
      9. <blockquote>
      10. <body>
      11. <br>
      12. <button>
   3. C
      1. <canvas>
      2. <caption>
      3. <center>
      4. <cite>
      5. <code>
      6. <col>
      7. <colgroup>
      8. <content>
   4. D
      1. <data>
      2. <datalist>
      3. <dd>
      4. <del>
      5. <details>
      6. <dfn>
      7. <dialog>
      8. <dir>
      9. <div>
      10. <dl>
      11. <dt>
   5. E
      1. <em>
      2. <embed>
   6. F
      1. <fieldset>
      2. <figcaption>
      3. <figure>
      4. <font>
      5. <footer>
      6. <form>
      7. <frame>
      8. <frameset>
   7. G H
      1. <h1>
      2. <h2>
      3. <h3>
      4. <h4>
      5. <h5>
      6. <h6>
      7. <head>
      8. <header>
      9. <hgroup>
      10. <hr>
      11. <html>
   8. I
      1. <i>
      2. <iframe>
      3. <img>
      4. <input>
      5. <ins>
      6. <isindex>
   9. J K
      1. <kbd>
      2. <keygen>
   10. L
       1. <label>
       2. <legend>
       3. <li>
       4. <link>
       5. <listing>
   11. M
       1. <main>
       2. <map>
       3. <mark>
       4. <marquee>
       5. <menu>
       6. <menuitem>
       7. <meta>
       8. <meter>
   12. N
       1. <nav>
       2. <nobr>
       3. <noframes>
       4. <noscript>
   13. O
       1. <object>
       2. <ol>
       3. <optgroup>
       4. <option>
       5. <output>
   14. P
       1. <p>
       2. <param>
       3. <picture>
       4. <plaintext>
       5. <pre>
       6. <progress>
   15. Q
       1. <q>
   16. R
       1. <rp>
       2. <rt>
       3. <rtc>
       4. <ruby>
   17. S
       1. <s>
       2. <samp>
       3. <script>
       4. <section>
       5. <select>
       6. <shadow>
       7. <slot>
       8. <small>
       9. <source>
       10. <spacer>
       11. <span>
       12. <strike>
       13. <strong>
       14. <style>
       15. <sub>
       16. <summary>
       17. <sup>
   18. T
       1. <table>
       2. <tbody>
       3. <td>
       4. <template>
       5. <textarea>
       6. <tfoot>
       7. <th>
       8. <thead>
       9. <time>
       10. <title>
       11. <tr>
       12. <track>
       13. <tt>
   19. U
       1. <u>
       2. <ul>
   20. V
       1. <var>
       2. <video>
   21. W
       1. <wbr>
   22. X Y Z
       1. <xmp>