At what stage in the lifecycles should it be safe to call .clientWidth of a rendered element in my template

[tkmoney]

I have tried firstUpdated and awaited updateComplete as well as the "updated" method and each time I get returned "0" when I call .clientWidth on the element. I also tried getBoundingClientRect (returns 0 for everything) as well as offsetWidth. If I do an initial render but then later make a change to the component, then I DO see correct values for .clientWidth within the updated method. I also tried wrapping it in a requestAnimationFrame callback but still no luck.

Thanks!

[augustjk]

updated() or firstUpdated() should be the correct place as that is after updates are committed to the DOM. Would you be able to create a reproduction on https://lit.dev/playground for where it's not working initially?

[tkmoney]

aw ok, I figured it out,

I was attempting to get .clientWidth while the components parent has display:none; set. This causes any reading of .clientWidth or any other size data from child elements to return 0. Thank you for sending me down the correct path!

[sorvell]

Depending on your needs, you could consider using a ResizeObserver to handle cases like this.