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

Именованные слоты в Slim.js представляют собой механизм для создания гибкой и структурированной вставки содержимого в компоненты. Они позволяют компоненту принимать несколько независимых частей контента и размещать их в определённых местах шаблона. В отличие от обычного слота, который автоматически подставляет всё содержимое по умолчанию, именованные слоты дают возможность управлять содержимым выборочно и точно.

Основы синтаксиса

Именованный слот объявляется с помощью атрибута name в HTML-шаблоне компонента:

<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>

Каждый slot с именем работает как контейнер для конкретного фрагмента DOM, который будет передан при использовании компонента.

В момент вставки контента используется атрибут slot в дочернем элементе:

<my-component>
  <h1 slot="header">Заголовок компонента</h1>
  <p slot="content">Основной текст компонента</p>
  <footer slot="footer">Подвал компонента</footer>
</my-component>

Slim.js автоматически сопоставляет элементы с атрибутом slot с соответствующими слотами по имени.

Дефолтное содержимое слотов

Если именованный слот не получает контент извне, можно определить значение по умолчанию прямо внутри компонента:

<slot name="header">
  <h2>Заголовок по умолчанию</h2>
</slot>

Это особенно полезно для создания универсальных компонентов, которые могут корректно отображаться даже при отсутствии части данных.

Динамическая подстановка контента

Slim.js поддерживает реактивность слотов, что позволяет изменять содержимое динамически. Например:

class MyComponent extends Slim {
  get useShadow() { return true; }

  template() {
    return `
      <slot name="header"></slot>
      <slot name="content"></slot>
    `;
  }
}

customElements.define('my-component', MyComponent);

Изменение дочерних элементов с атрибутом slot автоматически обновляет отображение в компоненте, без необходимости вручную манипулировать DOM.

Вложенные и комбинированные слоты

Именованные слоты можно использовать вложенно, создавая структуру из нескольких уровней:

<parent-component>
  <child-component slot="content">
    <p slot="inner">Текст для внутреннего слота</p>
  </child-component>
</parent-component>

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

Условная отрисовка слотов

Slim.js позволяет использовать слоты внутри условных блоков, сохраняя их реактивность:

template() {
  return `
    ${this.showHeader ? '<slot name="header"></slot>' : ''}
    <slot name="content"></slot>
  `;
}

Таким образом, слоты могут появляться и исчезать динамически, в зависимости от состояния компонента.

Практические рекомендации

  • Использовать именованные слоты для семантически разных частей компонента, таких как заголовок, тело и подвал.
  • Определять значение по умолчанию для слотов, чтобы компонент был устойчив к отсутствию контента.
  • Не дублировать имена слотов, так как Slim.js сопоставляет контент по точному имени.
  • Сочетать именованные и дефолтные слоты для максимальной гибкости и упрощения структуры компонентов.

Именованные слоты в Slim.js позволяют создавать многоразовые и настраиваемые компоненты, обеспечивая точное разделение контента и его динамическое управление. Это делает библиотеку мощным инструментом для построения сложных интерфейсов с минимальными усилиями по управлению DOM.

Оглавление