SSR+hydration should not result in duplicated stylesheets across HTML and JS

[nolanlawson]

Right now, the way SSR works is that renderComponent renders the component stylesheets as <style>s:

<x-foo>
  <template shadowrootmode=open>
    <style> div { color: red } </style>
    <div>Hello world</div>
  </template>
</x-foo>

And then this stylesheet is duplicated inside of the JS bundle as well:

function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
  var shadowSelector = token ? ("[" + token + "]") : "";
  return "div" + shadowSelector + " {color: red;}";
}

This is fairly wasteful to include the same content twice. Especially if disableSyntheticShadowSupport is set in the compiler, then the strings are always the same (at least for shadow DOM – light DOM is trickier because of :host and useActualHostSelector).

Ideally there should be some way to avoid this duplication entirely, i.e. to only put the stylesheet into the HTML, not the JS.

Related: https://github.com/salesforce/lwc/issues/2851

[wjhsf]

It doesn't address this issue directly, but the introduction of <lwc-style> in #5264 can help mitigate increased bundle size.