diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index f68d2f240d4..53974bc9384 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -3,6 +3,7 @@ */ import { + type ObjectDirective, Suspense, Teleport, Transition, @@ -1695,5 +1696,24 @@ describe('SSR hydration', () => { app.mount(container) expect(`Hydration style mismatch`).not.toHaveBeenWarned() }) + + // #11189 + test('should not warn for directives that mutate DOM in created', () => { + const container = document.createElement('div') + container.innerHTML = `
` + const vColor: ObjectDirective = { + created(el, binding) { + el.classList.add(binding.value) + }, + } + const app = createSSRApp({ + setup() { + return () => + withDirectives(h('div', { class: 'test' }), [[vColor, 'red']]) + }, + }) + app.mount(container) + expect(`Hydration style mismatch`).not.toHaveBeenWarned() + }) }) }) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index ec829a6e3ba..9376604b16f 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -459,6 +459,9 @@ export function createHydrationFunctions( // check hydration mismatch if ( (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) && + // #11189 skip if this node has directives that have created hooks + // as it could have mutated the DOM in any possible way + !(dirs && dirs.some(d => d.dir.created)) && propHasMismatch(el, key, props[key], vnode, parentComponent) ) { logMismatchError()