From f2c1412e46a8fad3e13403bfa78335c4f704f21c Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 6 May 2024 15:38:16 -0700
Subject: [PATCH] fix(hydration): handle edge case of style mismatch without
 style attribute

ref #10786
---
 packages/runtime-core/__tests__/hydration.spec.ts | 7 +++++++
 packages/runtime-core/src/hydration.ts            | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index e0277622c13..ec9613c9571 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1527,6 +1527,13 @@ describe('SSR hydration', () => {
       expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
     })
 
+    test('style mismatch when no style attribute is present', () => {
+      mountWithHydration(`<div></div>`, () =>
+        h('div', { style: { color: 'red' } }),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
     test('style mismatch w/ v-show', () => {
       mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
         withDirectives(createVNode('div', { style: 'color: red' }, ''), [
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index a7832ac3d57..dd3da56a624 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -727,8 +727,8 @@ function propHasMismatch(
 ): boolean {
   let mismatchType: string | undefined
   let mismatchKey: string | undefined
-  let actual: any
-  let expected: any
+  let actual: string | boolean | null | undefined
+  let expected: string | boolean | null | undefined
   if (key === 'class') {
     // classes might be in different order, but that doesn't affect cascade
     // so we just need to check if the class lists contain the same classes.
@@ -739,7 +739,7 @@ function propHasMismatch(
     }
   } else if (key === 'style') {
     // style might be in different order, but that doesn't affect cascade
-    actual = el.getAttribute('style')
+    actual = el.getAttribute('style') || ''
     expected = isString(clientValue)
       ? clientValue
       : stringifyStyle(normalizeStyle(clientValue))