feat(runtime): Remove redundant SSR style elements after adoptedStyleSheets adoption

[Jagget]

During hydration, shadow DOM components adopt styles via adoptedStyleSheets. The SSR-rendered <style sty-id="..."> elements inside shadow roots become redundant and can be removed.

• Runs only for shadow DOM components during hydration
• Removal occurs after adoptedStyleSheets is populated
• Negligible performance impact (~1 querySelector per shadow root)

[johnjenkins]

Thanks for raising @Jagget
Can you explain the impact of stylesheet not being removed?

[Jagget]

@johnjenkins not removed stylesheets doesn't have negative impact, they just duplicate one another and basically useless. For every element browser should read and parse the same styles twice:

[johnjenkins]

But I’m not sure that impacts anything?

The initial style tag is already there and parsed as part of the initial page render, then they’re converted to constructible stylesheets.

Removing the original style tag doesn’t impact any of that?

[Jagget]

@johnjenkins But still, there is twice amount of styles. And we don't need 50% of that, because it's the same. But the browser still have to read it and apply it. I think you can count browser's memory consumption as an impact here. Because browser can unload duplicated styles.

[Jagget]

Removing styles frees memory, especially with many shadow DOM instances. Imagine, if a page with 100 shadow DOM components, that's 100 redundant <style> nodes...

I mean, yes, it's not a parsing optimization. It's more of a runtime cleanup.

[johnjenkins]

Kk - think that makes sense. Can you try and schedule the removal (eg via writeTask)