HTML таг slot

Пример

Кратък пример как се използва тагът <slot>.

<!-- Дефиниране на Web Component с <slot> -->
<template id="user-card-template">
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: .5rem;
      padding: 1rem;
      max-width: 260px;
      font-family: system-ui, sans-serif;
    }
    .name {
      font-weight: 600;
      margin-bottom: .25rem;
    }
    .role {
      color: #6c757d;
      font-size: .9rem;
    }
  </style>
  <div class="card">
    <div class="name"><slot name="name">Име по подразбиране</slot></div>
    <div class="role"><slot name="role">Роля по подразбиране</slot></div>
    <div class="extra">
      <slot>Допълнителна информация по подразбиране</slot>
    </div>
  </div>
</template>

<script>
  class UserCard extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('user-card-template');
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('user-card', UserCard);
</script>

<!-- Използване на компонента и запълване на слотовете -->
<user-card>
  <span slot="name">Иван Петров</span>
  <span slot="role">Frontend разработчик</span>
  <p>Работи с HTML, CSS, JavaScript и Web Components.</p>
</user-card>

Дефиниция и употреба

Виж как се ползва тагът <slot>.

<slot> е HTML елемент, използван в контекста на Web Components и Shadow DOM. Той представлява „място за съдържание“ (placeholder) вътре в шаблона на компонент, в което по-късно се вмъква съдържанието, подадено от потребителя на компонента.

Когато създадем custom element и му добавим Shadow DOM, вътрешната структура на компонента е капсулирана и по подразбиране не „вижда“ децата, които поставяме между отварящия и затварящия таг на компонента. Чрез <slot> казваме къде и как това външно съдържание да бъде визуализирано.

Има два основни типа слотове:

• Неименуван (default) слот – <slot>...fallback...</slot>. Всички елементи, които не са асоциирани с конкретно име (нямат атрибут slot), попадат в този слот. Текстът/елементите вътре в слота служат като „fallback“ съдържание, което се показва, ако потребителят не подаде нищо.
• Именуван слот – <slot name="title">Заглавие</slot>. Съдържанието се насочва към този слот чрез атрибут slot="title" върху елемента, който искаме да вмъкнем. Така можем да имаме няколко различни зони за съдържание в един компонент.

Типичният работен процес е следният:

1. Дефинираме шаблон с <template>, в който използваме един или повече <slot> елемента.
2. В JavaScript създаваме custom element (клас, наследяващ HTMLElement), прикачваме Shadow DOM и клонираме съдържанието на шаблона в него.
3. Когато използваме компонента в HTML, поставяме вътре съдържание и, ако е нужно, задаваме атрибут slot, за да го насочим към конкретен именуван слот.

Елементът <slot> не се визуализира директно – на негово място браузърът рендерира подаденото от потребителя съдържание или fallback съдържанието, ако такова не е подадено. Това позволява създаване на гъвкави, многократно използваеми компоненти с ясно дефинирани „зони“ за персонализация.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути