Wie kann ich kumulative Layoutverschiebungen in Lit vermeiden?CSS

CSS verstehen
Guest
 Wie kann ich kumulative Layoutverschiebungen in Lit vermeiden?

Post by Guest »

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: Select all



Und diese Komponente zwei ist definiert als

Code: Select all

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

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post