> Что такое Resize Observer и для чего он нужен? (JavaScript)

Resize Observer - это встроенный Web API, который позволяет отслеживать изменения размеров конкретного HTML-элемента. В отличие от события resize на window, он срабатывает при любом изменении размеров наблюдаемого элемента (например, при изменении вёрстки, добавлении контента, повороте устройства или ресайзе окна, влияющем на размеры элемента).

Основное назначение:

• Реализация адаптивных компонентов, которые должны реагировать на свою собственную ширину/высоту (а не на вьюпорт).
• Обновление графиков, канвасов или iframe при изменении размеров контейнера.
• Создание "умных" контейнеров, которые перестраивают внутреннюю логику (например, переключение между горизонтальным и вертикальным расположением элементов) в зависимости от доступного пространства.

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

JAVASCRIPT
const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Элемент изменился: ${width}px x ${height}px`);
    // Здесь можно обновить UI, пересчитать размеры дочерних элементов и т.д.
  }
});

const element = document.querySelector('.my-component');
observer.observe(element);

Ключевые особенности:

• Работает асинхронно и оптимизированно (не вызывает лишних перерисовок).
• Поддерживает contentRect (размеры контентной области), borderBoxSize и contentBoxSize.
• Не вызывает бесконечных циклов: если внутри обработчика изменить размеры элемента, сработает только одно дополнительное уведомление.

Resize Observer незаменим для создания отзывчивых компонентов, которые зависят от собственного размера, а не от размера окна браузера.