diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index c3976a8f076..17ffbb40092 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -97,6 +97,28 @@ describe('SSR hydration', () => { expect(s.children).toBe(staticContent) }) + // #6008 + test('static (with text node as starting node)', () => { + const html = ` A foo B` + const { vnode, container } = mountWithHydration(html, () => + createStaticVNode(` A foo B`, 3) + ) + expect(vnode.el).toBe(container.firstChild) + expect(vnode.anchor).toBe(container.lastChild) + expect(`Hydration node mismatch`).not.toHaveBeenWarned() + }) + + test('static with content adoption', () => { + const html = ` A foo B` + const { vnode, container } = mountWithHydration(html, () => + createStaticVNode(``, 3) + ) + expect(vnode.el).toBe(container.firstChild) + expect(vnode.anchor).toBe(container.lastChild) + expect(vnode.children).toBe(html) + expect(`Hydration node mismatch`).not.toHaveBeenWarned() + }) + test('element with text children', async () => { const msg = ref('foo') const { vnode, container } = mountWithHydration( diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 3637a09b2aa..8ada97b166b 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -150,7 +150,7 @@ export function createHydrationFunctions( } break case Static: - if (domType !== DOMNodeTypes.ELEMENT) { + if (domType !== DOMNodeTypes.ELEMENT && domType !== DOMNodeTypes.TEXT) { nextNode = onMismatch() } else { // determine anchor, adopt content @@ -160,7 +160,10 @@ export function createHydrationFunctions( const needToAdoptContent = !(vnode.children as string).length for (let i = 0; i < vnode.staticCount!; i++) { if (needToAdoptContent) - vnode.children += (nextNode as Element).outerHTML + vnode.children += + nextNode.nodeType === DOMNodeTypes.ELEMENT + ? (nextNode as Element).outerHTML + : (nextNode as Text).data if (i === vnode.staticCount! - 1) { vnode.anchor = nextNode }