fix(engine-core): dynamic class with empty string results in hydration mismatch

packages/@lwc/engine-core/src/framework/hydration.ts

@@ -664,7 +664,12 @@ function validateClassAttr(
 
     const elmClassName = getAttribute(elm, 'class');
 
-    if (!isUndefined(className) && String(className) !== elmClassName) {
+    if (
+        !isUndefined(className) &&
+        String(className) !== elmClassName &&
+        // No mismatch if SSR `class` attribute is missing and CSR `class` is the empty string
+        !(className === '' && isNull(elmClassName))
+    ) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
         // stringify for pretty-printing

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string/index.spec.js

@@ -0,0 +1,17 @@
+export default {
+    props: {
+        classes: '',
+    },
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            classes: p.className,
+        };
+    },
+    test(target, snapshots) {
+        const p = target.shadowRoot.querySelector('p');
+        expect(p).toBe(snapshots.p);
+        expect(p.className).toBe(snapshots.classes);
+    },
+};

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string/x/main/main.html

@@ -0,0 +1,3 @@
+<template>
+    <p class={classes}>text</p>
+</template>

packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/empty-string/x/main/main.js

@@ -0,0 +1,4 @@
+import { LightningElement, api } from 'lwc';
+export default class Main extends LightningElement {
+    @api classes;
+}