LitElement shadow root after styles loaded event

Question

I have a problem, I need to handle event after CSS styles was loaded into my component. I was trying to use lit-element lifecycle, still they are fired to early.

I'm trying to get my DOM element starting position and other data, but I get an initial position where after styles is loaded this position changes?

How to make styles load first or any event after styles loaded?

Answer 1

The firstUpdated lifecycle is typically what you're looking for:

Called after the element's DOM has been updated the first time, immediately before updated is called. Implement firstUpdated to perform one-time work after the element's template has been created.

If your elements are still loading even after firstUpdated is fired, you could wait for another cycle just to be safe with:

setTimeout(() => { /* code for checking DOM styles */ }, timeInMilliseconds);

timeInMilliseconds will likely only need to be 0 , but you may need to give it a bit more time because your styles are changing outside of typical styles. This could also be the case if you have any CSS animation or transition that could be impacting the display of your elements.

If all the above looks correct, I recommend opening an issue on the lit-element github page as it's still actively contributed to.