Фрагменты и композиция

SkateJS — это современная библиотека для создания веб-компонентов с использованием стандартов Custom Elements и Shadow DOM. Одной из ключевых возможностей SkateJS является работа с фрагментами (fragments) и композицией компонентов, что позволяет строить сложные интерфейсы из простых, переиспользуемых элементов.

Фрагменты (Fragments)

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

  • Избегать лишних обёрток в DOM.
  • Разделять логику на переиспользуемые части.
  • Улучшать производительность, так как фрагменты не создают дополнительного узла в дереве DOM.
Создание фрагментов

Фрагмент создаётся с использованием функции html из SkateJS. Пример:

import { html, Component } from 'skatejs';

const userInfoFragment = (user) => html`
  
`;

class UserCard extends Component {
  static get props() {
    return {
      user: { attribute: true }
    };
  }

  renderCallback() {
    return html`
      

        ${userInfoFragment(this.user)}
      

    `;
  }
}

customElements.define('user-card', UserCard);

Здесь userInfoFragment возвращает кусок разметки, который потом вставляется в компонент UserCard. Фрагменты могут содержать любой JSX-подобный синтаксис SkateJS, включая циклы, условия и вложенные компоненты.

Композиция компонентов

Композиция — один из основных принципов SkateJS, позволяющий строить сложные интерфейсы из простых компонентов. Это достигается через:

  1. Вложенные компоненты — один компонент может рендерить другой.
  2. Переиспользуемые фрагменты — для повторяющейся разметки.
  3. Композицию стилей — объединение стилей компонентов без глобальных CSS.
Пример композиции
class UserList extends Component {
  static get props() {
    return {
      users: { attribute: true }
    };
  }

  renderCallback() {
    return html`
      

        ${this.users.map(user => html``)}
      

    `;
  }
}

customElements.define('user-list', UserList);

В этом примере UserList рендерит массив пользователей, используя компонент UserCard. Каждый элемент списка — отдельный веб-компонент, полностью независимый и переиспользуемый.

Динамическая композиция и фрагменты

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

class NotificationPanel extends Component {
  static get props() {
    return {
      notifications: { attribute: true }
    };
  }

  renderCallback() {
    const notificationItems = this.notifications.map(n => html`
      

        ${n.message}
      

    `);

    return html`
      

        ${notificationItems.length ? notificationItems : html`
Нет уведомлений
`}
      

    `;
  }
}

customElements.define('notification-panel', NotificationPanel);

Здесь массив уведомлений преобразуется в массив фрагментов. Если уведомлений нет, рендерится другой фрагмент с сообщением об отсутствии данных. Такой подход позволяет полностью контролировать разметку без создания лишних компонентов.

Передача фрагментов в качестве пропсов

SkateJS поддерживает передачу фрагментов как свойств компонентов. Это расширяет возможности композиции:

const footerFragment = html`
  
Все права защищены © 2026

`;

class PageLayout extends Component {
  static get props() {
    return {
      header: { attribute: false },
      content: { attribute: false },
      footer: { attribute: false }
    };
  }

  renderCallback() {
    return html`
      

        ${this.header}
        ${this.content}
        ${this.footer}
      

    `;
  }
}

customElements.define('page-layout', PageLayout);

// Использование
html`
  Главная страница`}
    .content=${html`
Контент страницы
`}
    .footer=${footerFragment}>
  
`;

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

Работа с событиями внутри фрагментов

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

const buttonFragment = (onClick) => html`
  
`;

class ButtonPanel extends Component {
  handleClick() {
    console.log('Кнопка нажата');
  }

  renderCallback() {
    return html`
      

        ${buttonFragment(this.handleClick)}
      

    `;
  }
}

customElements.define('button-panel', ButtonPanel);

События обрабатываются через стандартный синтаксис SkateJS (@event=${handler}), что делает фрагменты полноценной частью компонента с собственной интерактивностью.

Резюме ключевых особенностей фрагментов и композиции

  • Фрагменты не создают лишних DOM-узлов, что оптимизирует структуру страницы.
  • Компоненты можно комбинировать динамически, создавая сложные интерфейсы из простых элементов.
  • Фрагменты могут передаваться как пропсы, использоваться для условий и циклов.
  • Обработчики событий внутри фрагментов полностью интегрированы с родительским компонентом.
  • Поддержка повторного использования компонентов и фрагментов позволяет строить модульные и расширяемые приложения.
Оглавление