Option to emit <link>s instead of <style>s in SSR

[nolanlawson]

Right now we render inline <style> in components when we do SSR:

<my-component>
  #shadow-root
    <style>div { color: green; }</style>
    <div>Hello</div>
</my-component>

For components that use shared styles or that are repeated many times, this can lead to a lot of duplicated <style>s in the DOM. Browsers are pretty smart about optimizing this, and compression will remove duplication, but it's still a bit sub-optimal. Ideally we should have a mode to emit <link rel=stylesheet>s instead of <style>s. (Or just make <link>s the default.)

[uip-robot-zz]

This issue has been linked to a new work item: W-11195728

[nolanlawson]

I've thought about this a bit more. Right now there are a few reasons not to do this optimization:

• Gzip is already quite good at deduplicating HTML content
• Browsers have explicit optimizations for <style>s inside of shadow roots (not clear this applies to <link rel=stylesheet>s)
• Some folks actually think you should just inline all your CSS into your HTML anyway, since the cache benefits of .css aren't always enormous and you can get progressive rendering instead
• It's complex to implement

However, we do have some internal evidence that separate <link rel=stylesheet>s may be more performant than inlined <style>s. These tests aren't conclusive, so it would be good to continue experimenting.

If we do implement this, it would be nice to do it in a bundler-agnostic way, similar to how Svelte/Vue allow their stylesheets to be hoisted out of components by Webpack/Rollup/etc. which is responsible for handling the actual *.css files and <link rel=stylesheet>s.