From a890378b5e9e02b469ee6c1e03540dc896ece122 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 28 May 2025 08:13:15 +0800
Subject: [PATCH 1/7] fix(hydration): handle empty content in Transition appear
 edge case

---
 packages/runtime-core/src/hydration.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 6ffdbc68de4..771316e6274 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -761,7 +761,8 @@ export function createHydrationFunctions(
     // replace node
     const parentNode = oldNode.parentNode
     if (parentNode) {
-      parentNode.replaceChild(newNode, oldNode)
+      if (newNode) parentNode.replaceChild(newNode, oldNode)
+      else remove(oldNode)
     }
 
     // update vnode

From bd7d569fb877fff670340f9df02ac6bffe5ab670 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 28 May 2025 08:18:55 +0800
Subject: [PATCH 2/7] test: add test

---
 .../runtime-core/__tests__/hydration.spec.ts   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 4a9e0fac2b6..bc9b189404d 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1677,6 +1677,24 @@ describe('SSR hydration', () => {
     expect(`mismatch`).not.toHaveBeenWarned()
   })
 
+  // #13394
+  test('transition appear work with empty content', () => {
+    const { vnode, container } = mountWithHydration(
+      `<template></template>`,
+      () =>
+        h(
+          Transition,
+          { appear: true },
+          {
+            default: () => null,
+          },
+        ),
+    )
+    expect(container.firstChild).toBe(null)
+    expect(vnode.el).toBe(container.firstChild)
+    expect(`mismatch`).not.toHaveBeenWarned()
+  })
+
   test('transition appear with v-if', () => {
     const show = false
     const { vnode, container } = mountWithHydration(

From cd9735dbd3d5fd94f8483caa58990105e1ff0856 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 4 Jun 2025 11:24:33 +0800
Subject: [PATCH 3/7] fix(hydration): handle empty <template> rendering by
 creating a comment node

---
 .../runtime-core/__tests__/hydration.spec.ts  | 23 ++++++++++++++-----
 packages/runtime-core/src/hydration.ts        | 14 ++++++-----
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index bc9b189404d..8f7781e482f 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1678,21 +1678,32 @@ describe('SSR hydration', () => {
   })
 
   // #13394
-  test('transition appear work with empty content', () => {
+  test('transition appear work with empty content', async () => {
+    const show = ref(true)
     const { vnode, container } = mountWithHydration(
       `<template></template>`,
-      () =>
-        h(
+      function (this: any) {
+        return h(
           Transition,
           { appear: true },
           {
-            default: () => null,
+            default: () =>
+              show.value
+                ? renderSlot(this.$slots, 'default')
+                : createTextVNode('foo'),
           },
-        ),
+        )
+      },
     )
-    expect(container.firstChild).toBe(null)
+
+    // expect empty slot render as a comment node
+    expect(container.firstChild!.nodeType).toBe(Node.COMMENT_NODE)
     expect(vnode.el).toBe(container.firstChild)
     expect(`mismatch`).not.toHaveBeenWarned()
+
+    show.value = false
+    await nextTick()
+    expect(container.innerHTML).toBe('foo')
   })
 
   test('transition appear with v-if', () => {
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 771316e6274..705fd1b13a3 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -202,7 +202,9 @@ export function createHydrationFunctions(
           // wrapped <transition appear>
           // replace <template> node with inner child
           replaceNode(
-            (vnode.el = node.content.firstChild!),
+            // #13394, the server may render an empty <template>, a comment node
+            // needs to be created to be consistent with the client's behavior
+            (vnode.el = node.content.firstChild || createComment('')),
             node,
             parentComponent,
           )
@@ -397,10 +399,11 @@ export function createHydrationFunctions(
           parentComponent.vnode.props &&
           parentComponent.vnode.props.appear
 
-        const content = (el as HTMLTemplateElement).content
-          .firstChild as Element & { $cls?: string }
+        let content =
+          (el.content.firstChild as Element & { $cls?: string }) ||
+          createComment('')
 
-        if (needCallTransitionHooks) {
+        if (needCallTransitionHooks && content instanceof Element) {
           const cls = content.getAttribute('class')
           if (cls) content.$cls = cls
           transition!.beforeEnter(content)
@@ -761,8 +764,7 @@ export function createHydrationFunctions(
     // replace node
     const parentNode = oldNode.parentNode
     if (parentNode) {
-      if (newNode) parentNode.replaceChild(newNode, oldNode)
-      else remove(oldNode)
+      parentNode.replaceChild(newNode, oldNode)
     }
 
     // update vnode

From a95feba856a5830215f8b0efa69d4353902c0fa7 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 4 Jun 2025 12:01:26 +0800
Subject: [PATCH 4/7] fix(ssr): ensure empty slots render as comment nodes in
 hydration

---
 .../runtime-core/__tests__/hydration.spec.ts     |  4 ++--
 packages/runtime-core/src/hydration.ts           | 11 ++++-------
 .../server-renderer/__tests__/ssrSlot.spec.ts    | 16 ++++++++++++++++
 .../server-renderer/src/helpers/ssrRenderSlot.ts |  2 ++
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 8f7781e482f..1ff141db8ab 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1681,7 +1681,7 @@ describe('SSR hydration', () => {
   test('transition appear work with empty content', async () => {
     const show = ref(true)
     const { vnode, container } = mountWithHydration(
-      `<template></template>`,
+      `<template><!----></template>`,
       function (this: any) {
         return h(
           Transition,
@@ -1696,7 +1696,7 @@ describe('SSR hydration', () => {
       },
     )
 
-    // expect empty slot render as a comment node
+    // empty slot render as a comment node
     expect(container.firstChild!.nodeType).toBe(Node.COMMENT_NODE)
     expect(vnode.el).toBe(container.firstChild)
     expect(`mismatch`).not.toHaveBeenWarned()
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 705fd1b13a3..6ffdbc68de4 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -202,9 +202,7 @@ export function createHydrationFunctions(
           // wrapped <transition appear>
           // replace <template> node with inner child
           replaceNode(
-            // #13394, the server may render an empty <template>, a comment node
-            // needs to be created to be consistent with the client's behavior
-            (vnode.el = node.content.firstChild || createComment('')),
+            (vnode.el = node.content.firstChild!),
             node,
             parentComponent,
           )
@@ -399,11 +397,10 @@ export function createHydrationFunctions(
           parentComponent.vnode.props &&
           parentComponent.vnode.props.appear
 
-        let content =
-          (el.content.firstChild as Element & { $cls?: string }) ||
-          createComment('')
+        const content = (el as HTMLTemplateElement).content
+          .firstChild as Element & { $cls?: string }
 
-        if (needCallTransitionHooks && content instanceof Element) {
+        if (needCallTransitionHooks) {
           const cls = content.getAttribute('class')
           if (cls) content.$cls = cls
           transition!.beforeEnter(content)
diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index 4cc7fd97ef2..c9ad424e837 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -124,6 +124,22 @@ describe('ssr: slot', () => {
       ),
     ).toBe(`<!---->`)
 
+    expect(
+      await renderToString(
+        createApp({
+          template: `<transition><slot/></transition>`,
+        }),
+      ),
+    ).toBe(`<!---->`)
+
+    expect(
+      await renderToString(
+        createApp({
+          template: `<transition appear><slot/></transition>`,
+        }),
+      ),
+    ).toBe(`<template><!----></template>`)
+
     expect(
       await renderToString(
         createApp({
diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index 19aa4ce63b7..c0cf50841c9 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -117,6 +117,8 @@ export function ssrRenderSlotInner(
     }
   } else if (fallbackRenderFn) {
     fallbackRenderFn()
+  } else if (transition) {
+    push(`<!---->`)
   }
 }
 

From 3f95d116394dc10763cd770770db3d734683d13d Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 4 Jun 2025 20:35:49 +0800
Subject: [PATCH 5/7] fix(ssr): handle empty slot rendering in
 ssrRenderSlotInner

---
 packages/server-renderer/src/helpers/ssrRenderSlot.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index c0cf50841c9..67d95e60e52 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -110,8 +110,12 @@ export function ssrRenderSlotInner(
           end--
         }
 
-        for (let i = start; i < end; i++) {
-          push(slotBuffer[i])
+        if (start < end) {
+          for (let i = start; i < end; i++) {
+            push(slotBuffer[i])
+          }
+        } else if (transition) {
+          push(`<!---->`)
         }
       }
     }

From c4e3d00bd7331c94efaff5e0548153128d16ae17 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Thu, 5 Jun 2025 09:24:35 +0800
Subject: [PATCH 6/7] test: add tests

---
 .../server-renderer/__tests__/ssrSlot.spec.ts | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index c9ad424e837..5a957b09162 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -132,6 +132,19 @@ describe('ssr: slot', () => {
       ),
     ).toBe(`<!---->`)
 
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<transition><slot/></transition>`,
+            },
+          },
+          template: `<one><slot/></one>`,
+        }),
+      ),
+    ).toBe(`<!---->`)
+
     expect(
       await renderToString(
         createApp({
@@ -140,6 +153,19 @@ describe('ssr: slot', () => {
       ),
     ).toBe(`<template><!----></template>`)
 
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<transition appear><slot/></transition>`,
+            },
+          },
+          template: `<one><slot/></one>`,
+        }),
+      ),
+    ).toBe(`<template><!----></template>`)
+
     expect(
       await renderToString(
         createApp({

From 8f82270fe1f462901eed446335168699b0e18295 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sat, 7 Jun 2025 08:30:09 +0800
Subject: [PATCH 7/7] fix(ssr): handle transition slots rendering by adding
 comment nodes

---
 .../server-renderer/__tests__/ssrSlot.spec.ts | 70 ++++++++++++++-----
 .../src/helpers/ssrRenderSlot.ts              |  2 +
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index 5a957b09162..214e6ee840b 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -111,23 +111,38 @@ describe('ssr: slot', () => {
   })
 
   test('transition slot', async () => {
+    const ReusableTransition = {
+      template: `<transition><slot/></transition>`,
+    }
+
+    const ReusableTransitionWithAppear = {
+      template: `<transition appear><slot/></transition>`,
+    }
+
     expect(
       await renderToString(
         createApp({
           components: {
-            one: {
-              template: `<transition><slot/></transition>`,
-            },
+            one: ReusableTransition,
           },
           template: `<one><div v-if="false">foo</div></one>`,
         }),
       ),
     ).toBe(`<!---->`)
 
+    expect(await renderToString(createApp(ReusableTransition))).toBe(`<!---->`)
+
+    expect(await renderToString(createApp(ReusableTransitionWithAppear))).toBe(
+      `<template><!----></template>`,
+    )
+
     expect(
       await renderToString(
         createApp({
-          template: `<transition><slot/></transition>`,
+          components: {
+            one: ReusableTransition,
+          },
+          template: `<one><slot/></one>`,
         }),
       ),
     ).toBe(`<!---->`)
@@ -136,19 +151,33 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components: {
-            one: {
-              template: `<transition><slot/></transition>`,
-            },
+            one: ReusableTransitionWithAppear,
           },
           template: `<one><slot/></one>`,
         }),
       ),
+    ).toBe(`<template><!----></template>`)
+
+    expect(
+      await renderToString(
+        createApp({
+          render() {
+            return h(ReusableTransition, null, {
+              default: () => null,
+            })
+          },
+        }),
+      ),
     ).toBe(`<!---->`)
 
     expect(
       await renderToString(
         createApp({
-          template: `<transition appear><slot/></transition>`,
+          render() {
+            return h(ReusableTransitionWithAppear, null, {
+              default: () => null,
+            })
+          },
         }),
       ),
     ).toBe(`<template><!----></template>`)
@@ -156,23 +185,32 @@ describe('ssr: slot', () => {
     expect(
       await renderToString(
         createApp({
-          components: {
-            one: {
-              template: `<transition appear><slot/></transition>`,
-            },
+          render() {
+            return h(ReusableTransitionWithAppear, null, {
+              default: () => [],
+            })
           },
-          template: `<one><slot/></one>`,
         }),
       ),
     ).toBe(`<template><!----></template>`)
 
+    expect(
+      await renderToString(
+        createApp({
+          render() {
+            return h(ReusableTransition, null, {
+              default: () => [],
+            })
+          },
+        }),
+      ),
+    ).toBe(`<!---->`)
+
     expect(
       await renderToString(
         createApp({
           components: {
-            one: {
-              template: `<transition><slot/></transition>`,
-            },
+            one: ReusableTransition,
           },
           template: `<one><div v-if="true">foo</div></one>`,
         }),
diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index 67d95e60e52..2f93a12de9d 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -74,6 +74,8 @@ export function ssrRenderSlotInner(
         )
       } else if (fallbackRenderFn) {
         fallbackRenderFn()
+      } else if (transition) {
+        push(`<!---->`)
       }
     } else {
       // ssr slot.