<resize-observer>

A custom element that offers a declarative interface to the ResizeObserver API.

Source code & documentation

Demo

Resize this box and check the browser's console for emitted events.
Source code
<resize-observer>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas magni assumenda facilis praesentium?</p>
  <p>Distinctio ad laboriosam, maxime, asperiores odio doloribus nisi numquam quibusdam molestias repellendus, earum ipsam pariatur ipsum natus?</p>
  <p>Ut nemo molestiae aspernatur consectetur impedit, culpa cumque qui numquam itaque recusandae sunt aut repellat dolore autem libero vel praesentium consequatur?</p>
</resize-observer>

<script>
  const el = document.querySelector('resize-observer');

  el.addEventListener('resize-observer:resize', evt => {
    console.log('resize-observer:resize ->', evt.detail);
  });
</script>

License

The MIT License (MIT)