<slot>

HTML элемент <slot> является частью набора технологии Web Components, является заполнителем внутри веб компонента, который можно заполнить собственной разметкой, которая позволяет создавать отдельные деревья DOM и представлять их вместе.

Категории контента Поток контента, содержание формулировки
Разрешенный контент Прозрачный
События slotchange
Пропуск тега Нет, открывающий и закрывающий теги обязательны.
Разрешенный родители Любой элемент, который принимает содержание формулировки
Разрешенные роли ARIA Никакой
Интерфейс DOM HTMLSlotElement

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

name
Название слота.
Именованый слот это элемент <slot> с атрибутом 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">&lt;<slot name="element-name">NEED NAME</slot>&gt;</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>

Примечание: Вы можете увидеть этот полный пример в действии на странице  element-details (смотрите его в режиме реального времени). Кроме того, вы можете найти в разделе Использование шаблонов и слотов.

Спецификации

Спецификация Статус Комментарии
HTML Living Standard
Определение '<slot>' в этой спецификации.
Живой стандарт  
DOM
Определение 'Slots' в этой спецификации.
Живой стандарт  

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
slotChrome Полная поддержка 53Edge Нет поддержки НетFirefox Полная поддержка 63
Полная поддержка 63
Нет поддержки 59 — 63
Отключено
Отключено 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
Отключено
Отключено Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 40Safari Полная поддержка 10WebView Android Полная поддержка 53Chrome Android Полная поддержка 53Firefox Android Полная поддержка 63
Полная поддержка 63
Нет поддержки 59 — 63
Отключено
Отключено 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
Отключено
Отключено Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 41Safari iOS Полная поддержка 10.1Samsung Internet Android Полная поддержка 6.0
nameChrome Полная поддержка 53Edge Нет поддержки НетFirefox Полная поддержка 63
Полная поддержка 63
Нет поддержки 59 — 63
Отключено
Отключено 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
Отключено
Отключено Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 40Safari Полная поддержка 10WebView Android Полная поддержка 53Chrome Android Полная поддержка 53Firefox Android Полная поддержка 63
Полная поддержка 63
Нет поддержки 59 — 63
Отключено
Отключено 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
Отключено
Отключено Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 41Safari iOS Полная поддержка 10.1Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.