Определение свойств и атрибутов

Фреймворк Lit строится вокруг концепции реактивных компонентов, где ключевую роль играют свойства (properties) и атрибуты (attributes). Понимание их различий и правильная настройка являются фундаментом для создания динамичных и производительных веб-компонентов.

Свойства компонентов

Свойства представляют собой внутренние данные компонента, которые могут быть изменяемыми и влиять на его рендеринг. В Lit свойства объявляются с использованием декоратора @property или статического метода properties.

import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';

class MyElement extends LitElement {
  @property({ type: String }) name = 'Guest';
  @property({ type: Number }) count = 0;

  render() {
    return html`<p>Hello, ${this.name}! Count: ${this.count}</p>`;
  }
}

customElements.define('my-element', MyElement);

Ключевые моменты:

  • type указывает на тип данных свойства и позволяет Lit автоматически преобразовывать значения, полученные из атрибутов, в нужный тип.
  • Свойства реактивны: изменение их значения автоматически вызывает повторный рендер компонента.
  • Начальные значения свойств можно задавать непосредственно в классе компонента.

Атрибуты HTML

Атрибуты — это данные, передаваемые через HTML-разметку. В Lit связь между свойствами и атрибутами реализована автоматически для простых типов (строки, числа, булевы значения).

<my-element name="Alice" count="5"></my-element>

В этом примере:

  • Атрибут name конвертируется в свойство name типа String.
  • Атрибут count конвертируется в свойство count типа Number.

Важно понимать: не все свойства автоматически отражаются в атрибутах. Для сложных объектов, массивов и функций связь с атрибутами обычно отключается, чтобы избежать сериализации в строку.

Настройка реакции свойств на атрибуты

Декоратор @property позволяет детально настраивать связь свойства и атрибута:

@property({ type: Boolean, reflect: true }) active = false;
  • reflect: true — свойство автоматически синхронизируется с атрибутом HTML.
  • Изменение свойства active обновляет атрибут active в DOM, и наоборот.

Пример использования:

<my-element active></my-element>

В Jav * aScript:

const el = document.querySelector('my-element');
el.active = false; // автоматически удаляет атрибут active из DOM

Типы данных и их преобразование

Lit поддерживает несколько типов данных для свойств:

Тип Преобразование из атрибута Особенности
String строка стандартное преобразование
Number Number(value) некорректные значения становятся NaN
Boolean присутствие атрибута = true, отсутствие = false используется для флагов
Array JSON.parse требует корректного JSON в атрибуте
Object JSON.parse применяется для передачи объектов через строку JSON

Пользовательские типы можно определять через функцию converter:

@property({
  converter: {
    fromAttribute: (value) => value.split(','),
    toAttribute: (value) => value.join(',')
  }
})
items = [];

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

Свойства тесно связаны с жизненным циклом компонента. Основной метод render() автоматически реагирует на изменения свойств. В Lit при изменении свойства происходит реактивное обновление шаблона, без необходимости вручную управлять DOM.

@property({ type: Number }) counter = 0;

increment() {
  this.counter++; // автоматически вызывает render()
}

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

  • Для простых данных (String, Number, Boolean) рекомендуется включать reflect: true только при необходимости синхронизации с HTML-атрибутами.
  • Сложные объекты лучше хранить как свойства без отражения в атрибуты.
  • Использование реактивных свойств повышает читаемость и поддержку кода, снижает необходимость в ручной манипуляции DOM.
  • Для передачи данных между компонентами следует использовать события и реактивные свойства, а не прямую модификацию атрибутов.

Отличие свойств от атрибутов

  • Свойства — внутренние, реактивные, поддерживают любые типы данных.
  • Атрибуты — статические, передаются через HTML, всегда строковые (с возможностью преобразования).
  • Связь между ними настраивается через @property и reflect, что позволяет компоненту оставаться предсказуемым и гибким.

Эта система свойств и атрибутов делает Lit мощным инструментом для построения реактивных веб-компонентов с минимальным кодом и высокой поддерживаемостью.

Оглавление