From 8c76f57cfc448a9000bfde9f6658bfa860a4e621 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 7 Nov 2025 15:12:20 +0800
Subject: [PATCH 1/2] feat(runtime-vapor): dynamic component fallback work with
 dynamic slots

---
 .../apiCreateDynamicComponent.spec.ts         | 31 +++++++++++++++++++
 packages/runtime-vapor/src/component.ts       | 15 ++++++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
index 89514e17701..1ee50e78591 100644
--- a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
+++ b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
@@ -148,4 +148,35 @@ describe('api: createDynamicComponent', () => {
     await nextTick()
     expect(html()).toBe('<div><div>B</div><!--dynamic-component--></div>')
   })
+
+  test('fallback with dynamic slots', async () => {
+    const slotName = ref('default')
+    const { html } = define({
+      setup() {
+        return createDynamicComponent(() => 'div', null, {
+          $: [
+            () => ({
+              name: slotName.value,
+              fn: () => template('<span>hi</span>')(),
+            }),
+          ] as any,
+        })
+      },
+    }).render()
+
+    expect(html()).toBe(
+      '<div><span>hi</span><!--slot--></div><!--dynamic-component-->',
+    )
+
+    // update slot name
+    slotName.value = 'custom'
+    await nextTick()
+    expect(html()).toBe('<div><!--slot--></div><!--dynamic-component-->')
+
+    slotName.value = 'default'
+    await nextTick()
+    expect(html()).toBe(
+      '<div><span>hi</span><!--slot--></div><!--dynamic-component-->',
+    )
+  })
 })
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index e850f08932d..10bd727d0df 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -665,7 +665,20 @@ export function createComponentWithFallback(
       setCurrentHydrationNode(el.firstChild)
     }
     if (rawSlots.$) {
-      // TODO dynamic slot fragment
+      const frag =
+        isHydrating || __DEV__
+          ? new DynamicFragment('slot')
+          : new DynamicFragment()
+
+      renderEffect(() => frag.update(getSlot(rawSlots as RawSlots, 'default')))
+
+      if (!isHydrating) {
+        const scopeId = currentInstance!.type.__scopeId
+        if (scopeId) setScopeId(frag, [`${scopeId}-s`])
+        insert(frag, el)
+      } else {
+        frag.hydrate()
+      }
     } else {
       insert(getSlot(rawSlots as RawSlots, 'default')!(), el)
     }

From c03a3c5019a3c9088e2a7015e8a0c6842bfb65d6 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 7 Nov 2025 15:58:40 +0800
Subject: [PATCH 2/2] wip: handling hydration

---
 .../runtime-vapor/__tests__/hydration.spec.ts | 28 +++++++++++++++++++
 packages/runtime-vapor/src/component.ts       | 22 ++++++---------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts
index 17174408eee..7094a0f60af 100644
--- a/packages/runtime-vapor/__tests__/hydration.spec.ts
+++ b/packages/runtime-vapor/__tests__/hydration.spec.ts
@@ -1065,6 +1065,34 @@ describe('Vapor Mode hydration', () => {
       `,
       )
     })
+
+    test('dynamic component fallback with dynamic slots', async () => {
+      const data = ref({
+        name: 'default',
+        msg: 'foo',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <component :is="'div'">
+            <template v-slot:[data.name]>
+              <span>{{ data.msg }}</span>
+            </template>
+          </component>
+        </template>`,
+        {},
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo</span><!----></div><!--dynamic-component-->"`,
+      )
+
+      data.value.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>bar</span><!----></div><!--dynamic-component-->"`,
+      )
+    })
   })
 
   describe('if', () => {
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 10bd727d0df..d083d7404cb 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -665,22 +665,16 @@ export function createComponentWithFallback(
       setCurrentHydrationNode(el.firstChild)
     }
     if (rawSlots.$) {
-      const frag =
-        isHydrating || __DEV__
-          ? new DynamicFragment('slot')
-          : new DynamicFragment()
-
+      // ssr output does not contain the slot anchor, use an empty string
+      // as the anchor label to avoid slot anchor search errors
+      const frag = new DynamicFragment(
+        isHydrating ? '' : __DEV__ ? 'slot' : undefined,
+      )
       renderEffect(() => frag.update(getSlot(rawSlots as RawSlots, 'default')))
-
-      if (!isHydrating) {
-        const scopeId = currentInstance!.type.__scopeId
-        if (scopeId) setScopeId(frag, [`${scopeId}-s`])
-        insert(frag, el)
-      } else {
-        frag.hydrate()
-      }
+      if (!isHydrating) insert(frag, el)
     } else {
-      insert(getSlot(rawSlots as RawSlots, 'default')!(), el)
+      const block = getSlot(rawSlots as RawSlots, 'default')!()
+      if (!isHydrating) insert(block, el)
     }
     if (isHydrating) {
       setCurrentHydrationNode(nextNode)