From: daiwei <daiwei521@126.com>
Date: Fri, 7 Nov 2025 07:12:20 +0000 (+0800)
Subject: feat(runtime-vapor): dynamic component fallback work with dynamic slots
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=8c76f57cfc448a9000bfde9f6658bfa860a4e621;p=thirdparty%2Fvuejs%2Fcore.git

feat(runtime-vapor): dynamic component fallback work with dynamic slots
---

diff --git a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
index 89514e1770..1ee50e7859 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 e850f08932..10bd727d0d 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)
     }