fix(ssr): add scoped classes during SSR (#6238)

* fix(ssr): add scoped classes to `scoped` ssr components

* chore: add test

* chore: lint

* chore: only on server

---------

Co-authored-by: John Jenkins <[email protected]>

Author: johnjenkins

src/runtime/vdom/vdom-render.ts

@@ -121,7 +121,11 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
       updateElement(null, newVNode, isSvgMode);
     }
 
-    if (BUILD.scoped && isDef(scopeId) && elm['s-si'] !== scopeId) {
+    if (
+      (BUILD.scoped || (BUILD.hydrateServerSide && CMP_FLAGS.shadowNeedsScopedCss)) &&
+      isDef(scopeId) &&
+      elm['s-si'] !== scopeId
+    ) {
       // if this element is `scoped: true` all internal
       // children required the scope id class for styling
       elm.classList.add((elm['s-si'] = scopeId));
@@ -183,7 +187,7 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
           putBackInOriginalLocation(oldParentVNode.$elm$, false);
         }
       }
-      if (BUILD.scoped) {
+      if (BUILD.scoped || (BUILD.hydrateServerSide && CMP_FLAGS.shadowNeedsScopedCss)) {
         addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode?.$elm$);
       }
     }

test/wdio/ssr-hydration/cmp.test.tsx

@@ -151,6 +151,25 @@ describe('Sanity check SSR > Client hydration', () => {
     it('resolves slots correctly during client-side hydration', async () => {
       await testSuite.slots();
     });
+
+    it('checks renderToString adds scoped class names', async () => {
+      const { html } = await renderToString(
+        `
+        <ssr-shadow-cmp>
+          <p>Default slot content</p>
+          <p slot="client-only">Client-only slot content</p>
+        </ssr-shadow-cmp>
+      `,
+        {
+          fullDocument: true,
+          serializeShadowRoot: 'scoped',
+          constrainTimeouts: false,
+          prettyHTML: false,
+        },
+      );
+      // standard scoped class + ::slotted scoped class
+      expect(html).toContain('sc-ssr-shadow-cmp sc-ssr-shadow-cmp-s');
+    });
   });
 
   describe('custom-elements / declarative-shadow-dom', () => {