Как избежать кумулятивных изменений макета в Lit? ⇐ CSS

[Anonymous]

У меня есть проект Lit, и Chrome Lighthouse показывает очень высокий совокупный сдвиг макета (CLS). Я предполагаю, что проблема возникает из-за того, что CSS компонента загружается с файлами JS и не может (?) быть загружен с заголовком in. Поскольку CSS загружается поздно, макет смещается.
Например, предположим, что у нас есть вложенные компоненты, такие как

Код: Выделить всё

И этот второй компонент определяется как

Код: Выделить всё

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`
Something
`
}
}

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

Есть ли способ загрузить CSS второго компонента раньше, чтобы это не вызвало сдвиг макета?
Если проблема была в компоненте- во-первых, это было бы легко, потому что его высоту можно было бы определить в таблице стилей в заголовке. Но этот подход не будет работать с (возможно, глубоко) вложенными компонентами.

Подробнее здесь: https://stackoverflow.com/questions/792 ... fts-in-lit