Eliminating CLS when hydrating Stencil components

We’ve been trying to improve the performance of our site and we have been able to eliminate most of the components that were manipulating the DOM after being rendered to eliminate a lot of our cumultative layout shift (CLS) that Google Lighthouse measures.

We’ve gotten to the point now where most of the CLS is attributed to the rendering of web components by the StencilJS library especially components that uses slots.

<div class="container">
  <div class="row">
    <snt-mycomponent>
       <div slot="content">My dynamic content</div>
    </snt-mycomponent>
  </div>
</div>

When the page renders, the height of the snt-mycomponent is unknown because the content inside is dynamic and it could vary in height because we are populating the content using CMS content.

When the page loads the container and row divs render with 0px height. When the Stencil component library loads and content is rendered and styled for snt-mycomponent, the height of the divs increase thus causing a CLS which Google is recording.

Is there a way to get around this? Given the content is dynamic we don’t know the height before it is rendered. Is the only way to get around the shift is to use static site generation so that StencilJS doesn’t have to client side render?

FYI, we are currently using non shadow components. The reason is we have an AB testing tool that doesn’t play well with shadow dom components.