What are the elements in the ResizeObserver callback

Question

The documentation and the canonical examples of the ResizeObserver show that the callback function receives

An array of ResizeObserverEntry objects that can be used to access the new dimensions of the element after each change.

Do I understand this API correctly and typically, it should be enough to just use the last array element to get the "final" size of the element?

const resizeObserver = new ResizeObserver(entries => {
   const finalElement = entries[entries.length - 1];
   const finalBoxSize = finalElement.contentBoxSize;

   console.log(finalBoxSize);
});

Answer 1

Likely that is not the correct way. To me, it looks like it really depends how accurate your "query" for the element to be observed is. Take look at the properties defined in the callback array objects here . The callback returns an array of those objects. If you have a very specific "query" eg element with an id it should return only one element, if you pass just a div, then it will likely return an array of every div on the page as a separate entry. I haven't tried it myself so there is some guessing done here.