When i Use ResizeObserver i Create a ObserverCallBack like
public handleCallBack: ResizeObserverCallback = entries => {
entries.forEach(entry => {
// get new size
const newWidth = entry.borderBoxSize.inlineSize
})
}
But the type of borderBoxSize is ReadonlyArray of ResizeObserverSize
I should change my code to be borderBoxSize[0]
I'm very curious why borderBoxSize need to be an Array, and when it's length will be larger then 1
According to the note at https://drafts.csswg.org/resize-observer/#dom-resizeobserverentry-borderboxsize it can't happen yet, but will in a future version of the specs:
The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments, which occur in multi-column scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.