Тег <slot>

Тег <slot> (укр. — “слот”, “місце вставки”) в HTML використовується всередині Web Components (кастомних елементів) для визначення місця, куди може бути вставлений динамічний вміст ззовні. Це основний механізм реалізації content projection (проекції вмісту) у специфікації Shadow DOM.

При створенні кастомних компонентів через Shadow DOM, <slot> дозволяє передавати зовнішній контент у визначені зони компоненту.

Атрибути

Специфічні атрибути

  • name — ідентифікатор слоту. Якщо не вказано — слот вважається default slot (основний слот для контенту без імені). Наприклад:
<slot name="header"></slot>

Глобальні атрибути

Тег <slot> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<slot id="main-slot"></slot>
  • class — для CSS-стилізації (застосовується до слота як DOM-елемента). Наприклад:
<slot class="content-slot"></slot>
  • style — для інлайн-стилів (працює тільки в межах Shadow DOM). Наприклад:
<slot style="border: 1px dashed #ccc;"></slot>
  • title — підказка при наведенні (практично не використовується). Наприклад:
<slot title="Динамічний контент"></slot>
  • lang — вказує мову вмісту (зазвичай не використовується). Наприклад:
<slot lang="uk"></slot>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Приклад використання slot</title>
</head>
<body>

<custom-card>
  <h2 slot="title">Заголовок картки</h2>
  <p>Основний текст картки.</p>
  <footer slot="footer">Підвал картки</footer>
</custom-card>

<script>
  class CustomCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>
          .card { border: 1px solid #ccc; padding: 20px; border-radius: 10px; }
          ::slotted(h2) { color: darkblue; }
        </style>
        <div class="card">
          <header><slot name="title"></slot></header>
          <section><slot></slot></section>
          <footer><slot name="footer"></slot></footer>
        </div>
      `;
    }
  }
  customElements.define('custom-card', CustomCard);
</script>

</body>
</html>

Додаткові моменти

  • <slot> працює виключно всередині Shadow DOM.
  • Якщо для <slot> не вказано name — це default slot.
  • Можна визначати скільки завгодно іменованих слотів.
  • Вміст, який передається у <slot>, повинен мати атрибут slot з відповідним іменем.
  • Контент, що передається у слот, визначається через атрибут slot у зовнішньому коді.
  • Якщо слот порожній і немає переданого вмісту — можна визначити fallback-контент безпосередньо всередині тега <slot>: 
<slot name="header">Заголовок за замовчуванням</slot>
  • Підтримується всіма сучасними браузерами, які реалізують стандарт Web Components (Chrome, Edge, Firefox, Safari).