Вложенные элементы

Блок часто состоит из нескольких частей: у кнопки есть иконка и текст, у карточки — заголовок и тело. Такие части объявляются директивой @element внутри блока.

@block Button {
  @param --variant Variant;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  @element Icon {
    width: 1em;
    height: 1em;
  }

  @element Text {
    font-weight: 600;
  }
}

Имя элемента — в PascalCase и уникально в пределах блока. У элементов нет своих @param — они оформляют части блока, а состояние задаётся параметрами самого блока.

Элементы как суб-компоненты

В сгенерированном компоненте элементы доступны как вложенные компоненты через точку:

import { EButton } from './Button.ecss';

<EButton as="button" params={{ variant: 'primary' }}>
  <EButton.Icon>★</EButton.Icon>
  <EButton.Text>Нажми меня</EButton.Text>
</EButton>;

Суб-компоненты поддерживают проп as (по умолчанию <div>), но не принимают params.

Стили элемента в зависимости от блока

Элемент можно стилизовать по параметрам блока — для этого @element помещают внутрь @if или вложенного правила:

@block Button {
  @param --variant Variant;

  @if (--variant == "primary") {
    @element Icon {
      color: #fff;
    }
  }
}

Что дальше?

• @element — полный справочник
• Компоненты и адаптеры — использование суб-компонентов
• @external — стилизация элементов чужого блока