Lit Questions ( Pre-rendering / Static / SSR / Performance )

[MentalGear]

I recently discovered lit, and coming from svelte, I have some questions:

1. SEO: Web components are not visible until js executes them. So there's a blank space when js is off and it can't be pre-rendered static / server-side. Does lit has a feature that allows pre-rendering an output placeholder, which is hydrated once js becomes available so there's no gap and layout shifting? Or is this something a build tool like vite provides has a plugin for?
2. Shadow DOM Performance: Have browsers optimized or is there still a diff versus using ex. svelte ?

[augustjk]

1. There is a way to server render the custom elements built with Lit. https://lit.dev/docs/ssr/overview/ It produces declarative shadow DOM to produce HTML markup that browsers can parse and attach shadowroot content without any JS. Browser support for this feature is fairly new and I'm not actually sure how it fares with bots and crawlers. My understanding is that most bots should execute JS before grabbing the page. At least google does (https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics).
2. Shadow DOM probably is an extra overhead since it's adding another document to the tree but it comes with benefits like built-in scoping and composition with slots. I don't have numbers for what that bit of overhead would be but anecdotally there are sites with lots of web components with shadow roots that don't seem slow. It would be great if we had some benchmarks.

[MentalGear]

Comparable industry-standard benchmarks are always a good idea :).

Regarding the shadowroot approach, I find it a bit funny that the polyfill requires js, whereas the main reason for shadowroot is if there's no js enabled, and for js enabled browsers without shadowroot support, they would show the rendered component probably at the same time than the polyfill. Maybe I'm overlooking something, but it seems strange.