Наблюдаемые атрибуты и attributeChangedCallback
Реагируйте на изменения атрибутов HTML в пользовательских элементах
«Наблюдаемые атрибуты и attributeChangedCallback» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Реакция на изменения атрибутов
Элементы HTML предоставляют доступ к состоянию через атрибуты. Чтобы реагировать на превращение <my-card name="A"> в name="B", объявите список отслеживаемых атрибутов и реализуйте attributeChangedCallback в классе.
Статический observedAttributes
Объявите интересующие Вас атрибуты с помощью статического геттера: static get observedAttributes() { return ["name", "open"]; }. Только атрибуты из этого списка вызывают обратный вызов — остальные игнорируются ради производительности.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Сигнатура обратного вызова
attributeChangedCallback(name, oldValue, newValue) срабатывает при каждом изменении отслеживаемого атрибута. Все три параметра являются строками или имеют значение null, если атрибут отсутствует. Используйте их для обновления внутреннего состояния и повторной отрисовки.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Срабатывает для начальных атрибутов
Обратный вызов срабатывает один раз для каждого отслеживаемого атрибута, присутствующего при обновлении определения элемента. Поэтому отрисовка в attributeChangedCallback обрабатывает и первоначальную, и последующие отрисовки без отдельной ветки в connectedCallback.
Отражение свойств в атрибуты
Для логических атрибутов отражайте свойство в атрибут и наоборот: присваивание element.open = true должно устанавливать атрибут open, а удаление атрибута должно сбрасывать свойство. Так ведут себя встроенные элементы вроде <details>.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Как избежать бесконечных циклов
Если attributeChangedCallback устанавливает атрибуты, за которыми он наблюдает, может возникнуть бесконечный цикл. Всегда добавляйте в начало обратного вызова проверку if (oldValue === newValue) return; и не изменяйте отслеживаемые атрибуты внутри него.
Логические атрибуты
По соглашениям HTML логические атрибуты считаются «установленными» при наличии (disabled, open) и «снятыми» при отсутствии. Их значение игнорируется: disabled="false" всё равно означает отключённое состояние. Проверяйте наличие с помощью hasAttribute, а не сравнивайте строку.
JSON в атрибутах
Атрибуты являются строками. Чтобы передать структурированные данные, сериализуйте их с помощью JSON.stringify в разметке и разбирайте в attributeChangedCallback: <my-chart data-points='[1,2,3]'>. Для больших объёмов данных лучше передавать их через свойство JS.
Сравнение с MutationObserver
Можно отслеживать изменения атрибутов с помощью MutationObserver, но связка observedAttributes + attributeChangedCallback быстрее (не требует настройки наблюдателя), декларативнее (список отслеживаемых имён виден в классе) и соответствует принятому подходу для веб-компонентов.
Производительность: объединяйте отрисовки
Несколько атрибутов, изменённых подряд, вызовут несколько обратных вызовов и несколько отрисовок. Объединяйте их с помощью queueMicrotask или requestAnimationFrame, чтобы фактическая отрисовка выполнялась один раз за микроцикл или кадр независимо от количества изменившихся атрибутов.
Распространённая ошибка
Если забыть добавить атрибут в observedAttributes, обратный вызов для этого атрибута будет незаметно отключён. Если компонент не реагирует на вызов setAttribute, первым делом проверьте список статического observedAttributes.
Проверка знаний
Что произойдёт, если косвенно вызвать attributeChangedCallback, установив отслеживаемый атрибут внутри самого обратного вызова?
Итоги
Объявляйте отслеживаемые атрибуты с помощью статического геттера observedAttributes; attributeChangedCallback(name, oldValue, newValue) срабатывает при каждом изменении, включая первоначальный разбор. Отражайте свойства в атрибуты для логического состояния, защищайтесь от бесконечных циклов и объединяйте отрисовки с requestAnimationFrame ради производительности.
Часто задаваемые вопросы
Урок «Наблюдаемые атрибуты и attributeChangedCallback» бесплатный?
Да — полный текст урока «Наблюдаемые атрибуты и attributeChangedCallback» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Наблюдаемые атрибуты и attributeChangedCallback»?
Реагируйте на изменения атрибутов HTML в пользовательских элементах Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Наблюдаемые атрибуты и attributeChangedCallback»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Определение элементов с помощью customElements.define
- connectedCallback и disconnectedCallback
- Наблюдаемые атрибуты и attributeChangedCallback
- Расширение встроенных элементов