Programmiererforum

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

Ich habe ein Lit-Projekt und Chromes Lighthouse weist eine sehr hohe kumulative Layoutverschiebung (CLS) auf. Ich gehe davon aus, dass das Problem dadurch entsteht, dass das CSS der Komponente mit JS-Dateien geladen wird und nicht (?) mit einem In-Header geladen werden kann. Da CSS zu spät geladen wird, verschiebt sich das Layout.
Angenommen, wir haben verschachtelte Komponenten wie
[code]


[/code]
Und diese Komponente zwei ist definiert als
[code]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
}
}
[/code]
Gibt es eine Möglichkeit, das CSS von Komponente zwei früher zu laden, damit es nicht zu einer Layoutverschiebung kommt?
Wenn das Problem bei Komponente-2 läge? Erstens wäre es einfach, da seine Höhe im Stylesheet in head definiert werden könnte. Dieser Ansatz würde jedoch mit (möglicherweise tief) verschachtelten Komponenten nicht funktionieren.