Fallback-контент для слотов

В Slim.js слоты позволяют создавать гибкие компоненты с возможностью динамического наполнения контентом. Fallback-контент — это содержимое, которое отображается в слоте по умолчанию, если пользователь не передал собственный контент при использовании компонента. Эта функция особенно полезна для обеспечения устойчивости интерфейса и сохранения базового отображения.

Определение слота с fallback-контентом

Слот объявляется с помощью тега <slot>. Для указания fallback-контента необходимо поместить его внутрь тега <slot>:

class MyComponent extends Slim {
  get template() {
    return `
      <div class="card">
        <slot>
          <p>Контент по умолчанию</p>
        </slot>
      </div>
    `;
  }
}

Slim.tag('my-component', MyComponent);

В этом примере, если <my-component> будет использован без вложенного контента, то на странице отобразится абзац с текстом «Контент по умолчанию».

Поддержка нескольких слотов

Компонент может содержать несколько слотов с разными именами и fallback-контентом. Именованные слоты позволяют более точно управлять структурой компонента:

class CardComponent extends Slim {
  get template() {
    return `
      <div class="card">
        <header>
          <slot name="header">
            <h2>Заголовок по умолчанию</h2>
          </slot>
        </header>
        <main>
          <slot>
            <p>Основной контент по умолчанию</p>
          </slot>
        </main>
        <footer>
          <slot name="footer">
            <p>Подвал по умолчанию</p>
          </slot>
        </footer>
      </div>
    `;
  }
}

Slim.tag('card-component', CardComponent);

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

<card-component>
  <span slot="header">Пользовательский заголовок</span>
</card-component>

В этом случае отображение будет таким: пользовательский заголовок заменяет fallback в <slot name="header">, а основной контент и футер остаются с содержимым по умолчанию.

Поведение fallback-контента при динамических изменениях

Slim.js автоматически реагирует на изменения содержимого слотов. Если содержимое передано позже (например, через JavaScript), fallback-контент исчезает, а вставленный контент отображается вместо него:

const component = document.querySelector('my-component');
const newContent = document.createElement('span');
newContent.textContent = 'Динамический контент';
component.appendChild(newContent);

После добавления элемента в слот, текст «Контент по умолчанию» исчезает, и вместо него отображается «Динамический контент».

Рекомендации по использованию fallback-контента

  1. Минимизировать количество сложного HTML внутри fallback — это помогает поддерживать производительность, так как сложные элементы могут создавать лишнюю нагрузку при рендеринге.
  2. Использовать fallback для важных визуальных подсказок — если контент не передан, интерфейс должен оставаться информативным.
  3. Комбинировать с именованными слотами — это позволяет сохранять структурированность компонента и легко управлять различными секциями.

Взаимодействие с CSS и стилями

Fallback-контент наследует стили контейнера компонента, что позволяет создавать единообразное оформление:

.card p {
  font-style: italic;
  color: gray;
}

Даже если пользователь не передаст контент, fallback-текст будет соответствовать общему стилю компонента.

Ограничения и нюансы

  • Не поддерживается реактивное связывание внутри fallback-контента напрямую. Любая динамическая логика должна применяться к содержимому слота или через методы компонента.
  • Фallback-контент всегда отображается только при пустом слоте. Если слот содержит хотя бы один узел (например, пробел или перенос строки), он считается непустым и fallback не показывается. Для контроля такого поведения рекомендуется явно очищать пустые текстовые узлы.

Пример практического компонента

class AlertBox extends Slim {
  get template() {
    return `
      <div class="alert">
        <slot>
          <span>Предупреждение: данные не загружены.</span>
        </slot>
      </div>
    `;
  }
}

Slim.tag('alert-box', AlertBox);

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

<alert-box></alert-box> <!-- Покажет текст по умолчанию -->
<alert-box><span>Ошибка при загрузке файла!</span></alert-box> <!-- Покажет пользовательский текст -->

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

Оглавление