Cumulative layout shift

[MarcoTroost]

What is affected?

Component

Description

Material Web components do not follow the 'natural' rendering-sequence within the DOM.

Components aren't HTML, so they first need to be processed in order to be seen. This results in cumulative layout shift which negatively affects the user-experience (and probably SEO too).

• A possible solution could be a 'fallback-skeleton' of sorts, so that the initial space the component will occupy could be claimed in the DOM in advance.

• Another solution could be to provide SSR support for multiple frameworks, such a Nuxt.

Reproduction

Workaround

I have not found a workaround.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0

Browser/OS/Node environment

Latest Chrome on a MacBook

[asyncLiz]

Hi! Our components are HTML custom elements. They support SSR using @lit-labs/ssr (in fact, our https://material-web.dev catalog uses SSR!).

Here's a guide to get started: https://lit.dev/docs/ssr/overview/