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(`
`, () => + h('div', { style: { color: 'red' } }), + ) + expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1) + }) + test('style mismatch w/ v-show', () => { mountWithHydration(``, () => 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))