From: daiwei <daiwei521@126.com>
Date: Tue, 5 Aug 2025 14:10:20 +0000 (+0800)
Subject: fix(hydration): handling empty text node in slot
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F13383%2Fhead;p=thirdparty%2Fvuejs%2Fcore.git

fix(hydration): handling empty text node in slot
---

diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts
index 26da9e3e7..6ec5f09e6 100644
--- a/packages/runtime-vapor/__tests__/hydration.spec.ts
+++ b/packages/runtime-vapor/__tests__/hydration.spec.ts
@@ -183,7 +183,7 @@ describe('Vapor Mode hydration', () => {
       )
     })
 
-    test('empty text nodes', async () => {
+    test('empty text node', async () => {
       const data = reactive({ txt: '' })
       const { container } = await testHydration(
         `<template><div>{{ data.txt }}</div></template>`,
@@ -196,6 +196,26 @@ describe('Vapor Mode hydration', () => {
       await nextTick()
       expect(container.innerHTML).toMatchInlineSnapshot(`"<div>foo</div>"`)
     })
+
+    test('empty text node in slot', async () => {
+      const data = reactive({ txt: '' })
+      const { container } = await testHydration(
+        `<template><components.Child>{{data.txt}}</components.Child></template>`,
+        {
+          Child: `<template><slot/></template>`,
+        },
+        data,
+      )
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<!--[--> <!--]--><!--slot-->"`,
+      )
+
+      data.txt = 'foo'
+      await nextTick()
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<!--[-->foo<!--]--><!--slot-->"`,
+      )
+    })
   })
 
   describe('element', () => {
diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts
index 1f4df1f45..8abd4ee4b 100644
--- a/packages/runtime-vapor/src/dom/hydration.ts
+++ b/packages/runtime-vapor/src/dom/hydration.ts
@@ -9,6 +9,7 @@ import {
 import {
   __next,
   __nthChild,
+  createTextNode,
   disableHydrationNodeLookup,
   enableHydrationNodeLookup,
 } from './node'
@@ -97,7 +98,19 @@ export const isComment = (node: Node, data: string): node is Anchor =>
  */
 function adoptTemplateImpl(node: Node, template: string): Node | null {
   if (!(template[0] === '<' && template[1] === '!')) {
-    while (node.nodeType === 8) node = node.nextSibling!
+    while (node.nodeType === 8) {
+      node = node.nextSibling!
+
+      // empty text node in slot
+      if (
+        template === ' ' &&
+        isComment(node, ']') &&
+        isComment(node.previousSibling!, '[')
+      ) {
+        node = node.parentNode!.insertBefore(createTextNode(' '), node)
+        break
+      }
+    }
   }
 
   if (__DEV__) {