Grid column with auto-width and LitTemplate does not seem to work correctly

Flow
1

Hello,
I’m trying to create a grid with a column which renders a custom web-component which is implemented in vaadin flow as LitTemplate. This component uses a Lit template with a slot, where some additional components can be passed.
The component itself works correctly, but when I try to use it inside a grid column (with a component renderer) and let the grid calculate the column’s width automatically, it does not seem to work correctly.
The reason seems to be, that although the component from the template is created correctly and other components are added to the slot, the LitElement initializes the shadow DOM “asynchronously” outside the event loop, but the column width recalculation is triggered before the template rendering is finished, which means that it does not calculate correct width for the column.

Do you have any hints how to solve this without some excessive javascript hooks or resize observers?

Thank you

2

I’m not sure if I got your setup correctly. But if the issue is with the custom LitElement rendering asynchronously, you could try to force it rendering synchronously when it is added to the DOM. That should work by overriding connectedCallback of your custom LitElement like so:

connectedCallback() {
  super.connectedCallback();
  this.performUpdate();
}
1 Like
3

This helped. Thanks.