I have a Lit project and Chrome’s Lighthouse shows very high cumulative layout shift (CLS). I assume the problem arises due to the fact that component’s CSS loads with JS files and cannot (?) be loaded with a in header. Because CSS is loaded late, the layout shifts.

For example, let’s say we have nested components, such as

<component-one>
    <component-two></component-two>
</component-one>

And that component-two is defined as

import {css, html, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'

@customElement('component-two')
export class ComponentTwo extends LitElement {
    static styles = css`
        :host {
            display: block;
            min-height: 500px;
        }
    `

    render() {
        return html`
            <div>Something</div>
        `
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'component-two': ComponentTwo
    }
}

Is there a way to load component-two’s CSS earlier so it wouldn’t cause a layout shift?

If the problem were with component-one, it’d be easy, because its height could be defined in stylesheet in head. But that approach wouldn’t work with (possibly deeply) nested components.