<slot> HTML-элемент slot веб-компонента

Элемент <slot> HTML — это заполнитель внутри веб-компонента, который можно заполнить собственной разметкой при использовании компонента. Это позволяет создавать отдельные деревья DOM и отображать их вместе.

Слоты могут содержать обычный текст, другие элементы HTML или другие веб-компоненты. Слот также может содержать содержимое по умолчанию, которое отображается, если при использовании веб-компонента слоту не назначено другое содержимое.

Атрибуты

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

name

Имя слота. Именованный слот — это элемент <slot> с атрибутом name, а безымянный слот не имеет атрибута name, и по умолчанию его имя представляет собой пустую строку.

Если в корне теневого DOM используется назначение именованных слотов, дочерние элементы верхнего уровня хоста отображаются в слотах, имя которых совпадает со значением их атрибута slot. Имена слотов в одном корне теневого DOM должны быть уникальными: если у вас есть два слота с одинаковым именем, все элементы с соответствующим атрибутом slot отображаются в первом слоте. Все дочерние элементы верхнего уровня, у которых нет атрибута slot, отображаются в первом безымянном элементе <slot>, который называется слотом по умолчанию. Атрибут name не влияет на результат, если в корне теневого DOM используется ручное назначение слотов.

Дополнительную информацию см. в разделе shadowrootslotassignment об элементе <template> и в разделе Element.attachShadow().

Примеры

Основное использование

В этом HTML показано, как можно объявить несколько именованных слотов в элементе <template>. Обратите внимание, что эти слоты используются как слоты, только когда шаблон применяется внутри корня теневого DOM.

<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>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

Техническая сводка

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

Совместимость с браузерами

См. также

• Элемент HTML <template>
• Атрибут HTML slot
• Псевдоэлемент CSS ::slotted
• Псевдокласс CSS :has-slotted
• Модуль областей видимости CSS
• Использование шаблонов и слотов