Создание гибких веб-компонентов с помощью слотов

Веб-компоненты — это мощный инструмент, но передача сложного контента в них может быстро превратиться в беспорядок. Представьте, что вы пытаетесь создать компонент карточки, которому нужно изображение заголовка, заголовок, основной текст и кнопки действий — попытка втиснуть все это в атрибуты создаст нечитаемую мешанину. Именно здесь на помощь приходят слоты, кардинально меняя подход к созданию гибких, переиспользуемых UI-компонентов.

В этой статье показано, как использовать слоты для создания веб-компонентов, которые принимают богатый контент, сохраняя при этом чистую декларативную разметку. Вы узнаете, как слоты работают с shadow DOM, как реализовать как стандартные, так и именованные слоты, и как эффективно стилизовать контент слотов.

Проблема: Сложный контент в веб-компонентах

Традиционные HTML-атрибуты хорошо работают для простых значений:

<user-avatar src="profile.jpg" size="large"></user-avatar>

Но что происходит, когда нужно передать структурированный контент? Рассмотрим компонент карточки:

<!-- Это быстро становится беспорядочным -->
<product-card 
  title="Премиум наушники"
  description="<p>Высококачественный звук с <strong>шумоподавлением</strong></p>"
  price="$299"
  button-text="Добавить в корзину"
  image-src="headphones.jpg">
</product-card>

У этого подхода есть несколько проблем:

• HTML внутри атрибутов требует экранирования
• Сложные макеты становится невозможно управлять
• Использование компонента не соответствует стандартным HTML-паттернам

Как работают слоты: Основы

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

<product-card>
  <h2 slot="title">Премиум наушники</h2>
  <div slot="description">
    <p>Высококачественный звук с <strong>шумоподавлением</strong></p>
  </div>
  <button slot="action">Добавить в корзину</button>
</product-card>

Внутри вашего веб-компонента вы определяете, где этот контент появляется, используя элемент <slot>:

class ProductCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    
    shadow.innerHTML = `
      <style>
        .card {
          border: 1px solid #ddd;
          border-radius: 8px;
          padding: 16px;
        }
      </style>
      <div class="card">
        <slot name="title">Товар без названия</slot>
        <slot name="description">Описание недоступно</slot>
        <slot name="action"></slot>
      </div>
    `;
  }
}

customElements.define('product-card', ProductCard);

Контент внутри каждого тега <slot> служит запасным контентом — он появляется, когда соответствующий контент слота не предоставлен.

Стандартные и именованные слоты

Веб-компоненты поддерживают два типа слотов:

Стандартные слоты

Любой контент без атрибута slot попадает в стандартный (безымянный) слот:

// Определение компонента
shadow.innerHTML = `
  <article>
    <h2>Заголовок статьи</h2>
    <slot></slot> <!-- Стандартный слот -->
  </article>
`;

<!-- Использование -->
<my-article>
  <p>Этот параграф попадает в стандартный слот</p>
  <p>И этот тоже</p>
</my-article>

Именованные слоты

Именованные слоты дают вам точный контроль над размещением контента:

// Определение компонента
shadow.innerHTML = `
  <div class="profile">
    <slot name="avatar"></slot>
    <div class="info">
      <slot name="name">Аноним</slot>
      <slot name="bio">Биография не предоставлена</slot>
    </div>
  </div>
`;

<!-- Использование -->
<user-profile>
  <img slot="avatar" src="jane.jpg" alt="Джейн">
  <h3 slot="name">Джейн Разработчик</h3>
  <p slot="bio">Создаю потрясающие веб-компоненты</p>
</user-profile>

Реальный пример: Создание гибкого компонента карточки

Давайте создадим готовый к продакшену компонент карточки, который демонстрирует слоты в действии:

class FlexCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    
    shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          overflow: hidden;
          background: white;
        }
        
        .header {
          padding: 16px;
          border-bottom: 1px solid #e0e0e0;
        }
        
        .content {
          padding: 16px;
        }
        
        .footer {
          padding: 16px;
          background: #f5f5f5;
        }
        
        /* Скрыть пустые секции, когда нет контента слотов */
        .header:empty {
          display: none;
        }
        
        .footer:empty {
          display: none;
        }
      </style>
      
      <div class="header">
        <slot name="header"></slot>
      </div>
      <div class="content">
        <slot></slot>
      </div>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
    `;
  }
}

customElements.define('flex-card', FlexCard);

Теперь вы можете использовать его с любой структурой контента:

<flex-card>
  <h2 slot="header">Детали продукта</h2>
  
  <p>Основной контент попадает в стандартный слот</p>
  <ul>
    <li>Особенность 1</li>
    <li>Особенность 2</li>
  </ul>
  
  <div slot="footer">
    <button>Купить сейчас</button>
    <button>Сохранить на потом</button>
  </div>
</flex-card>

Стилизация контента слотов

Стилизация контента слотов требует специальных псевдоэлементов:

Использование ::slotted()

Псевдоэлемент ::slotted() нацеливается на элементы, помещенные в слоты:

/* Внутри shadow DOM вашего компонента */
::slotted(h2) {
  color: #333;
  margin: 0;
}

::slotted(button) {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

/* Нацеливание на конкретные слоты */
::slotted([slot="header"]) {
  font-size: 1.2em;
}

Важное ограничение: ::slotted() нацеливается только на прямой элемент слота, а не на его дочерние элементы.

Использование :host

Псевдокласс :host стилизует сам компонент:

:host {
  display: block;
  margin: 16px 0;
}

/* Стилизация на основе атрибутов */
:host([variant="primary"]) {
  border-color: #007bff;
}

/* Стилизация на основе контекста */
:host-context(.dark-theme) {
  background: #333;
  color: white;
}

Соображения производительности

Слоты обладают высокой производительностью, поскольку они не копируют DOM-узлы — они их проецируют. Контент слотов остается в light DOM, но отображается так, как если бы он был частью shadow DOM. Это означает:

• Обработчики событий на контенте слотов продолжают работать
• Стили из документа все еще могут применяться (если не заблокированы shadow DOM)
• Браузер не дублирует узлы в памяти

Поддержка браузерами и полифиллы

Слоты веб-компонентов имеют отличную поддержку в современных браузерах. Для старых браузеров рассмотрите использование полифиллов веб-компонентов.

Заключение

Слоты превращают веб-компоненты из простых пользовательских элементов в мощные, гибкие строительные блоки для переиспользуемого UI. Разделяя структуру и контент, они позволяют создавать компоненты, которые одновременно высоко настраиваемы и просты в использовании. Независимо от того, создаете ли вы дизайн-систему или лучше организуете свой код, освоение слотов необходимо для современной разработки веб-компонентов.

Готовы создавать более гибкие веб-компоненты? Начните с рефакторинга одного из ваших существующих компонентов для использования слотов. Сосредоточьтесь на областях, где вы в настоящее время передаете HTML через атрибуты или используете сложные структуры свойств. Ваше будущее «я» (и ваша команда) поблагодарят вас за более чистый, легко поддерживаемый код.

FAQ