fix(ssr): add scoped classes during SSR

[johnjenkins]

What is the current behavior?

When using renderToString to hydrate scoped web components, the "scoped" classes are not being applied correctly to the children of the host element.

GitHub Issue Number: #6219

What is the new behavior?

When using renderToString with serializeShadowRoot: 'scoped', the children of the host element should properly have the sc-web-component-name class applied and all the defined styles that come with it.

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

A new wdio test not checks for scoped classes from renderToString content

Other information

n/a

[Armand-Lluka]

I did some playing around trying to get to work on my end and noticed that modifying

 if (BUILD.hydrateServerSide && BUILD.shadowDom && cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss) {
        style = scopeCss(style, scopeId, true);
   }

to remove the hydrateServerSide, or invert, the check in initializeComponent.ts also seemed to resolve the issue. Not too sure where the correct place to change things here would be here since it seems it can be done in several ways.

[johnjenkins]

I did some playing around trying to get to work on my end and noticed that modifying ...
to remove the hydrateServerSide, or invert, the check in initializeComponent.ts also seemed to resolve the issue. Not too sure where the correct place to change things here would be here since it seems it can be done in several ways.

hey @Armand-Lluka - thanks for your investigation(!) but I don't think we would want to bring the scopeCss methods into the client-side build because it would add quite a number of bytes to the users not using SSR at all :)

[christian-bromann]

LGTM 👍