fix(runtime-vapor): hydrate vapor slot in vdom component with sibling nodes (#14512)

packages/runtime-vapor/__tests__/hydration.spec.ts

@@ -5465,6 +5465,58 @@ describe('VDOM interop', () => {
     )
   })
 
+  test('hydrate vapor slot in vdom component with sibling nodes', async () => {
+    const msg = ref('Hello World!')
+    const { container } = await testWithVaporApp(
+      `<script setup vapor>
+        const msg = _data
+        const components = _components
+      </script>
+      <template>
+        <components.Comp>
+          <h1>{{ msg }}</h1>
+        </components.Comp>
+        <h1>{{ msg }}</h1>
+      </template>`,
+      {
+        Comp: {
+          code: `
+          <template>
+            <div>
+              <slot />
+            </div>
+          </template>`,
+          vapor: false,
+        },
+      },
+      msg,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><div>
+      <!--[--><h1>Hello World!</h1><!--]-->
+      </div><h1>Hello World!</h1><!--]-->
+      "
+    `,
+    )
+
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+
+    msg.value = 'Hi Vapor'
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><div>
+      <!--[--><h1>Hi Vapor</h1><!--]-->
+      </div><h1>Hi Vapor</h1><!--]-->
+      "
+    `,
+    )
+  })
+
   test('hydrate VDOM slot content', async () => {
     const data = ref('foo')
     const { container } = await testWithVaporApp(

packages/runtime-vapor/src/vdomInterop.ts

@@ -328,7 +328,12 @@ const vaporInteropImpl: Omit<
         )
       }
     })
-    return vnode.anchor as Node
+    // For fragment-wrapped slot content (`<!--[-->...<!--]-->`), return the
+    // node after the end anchor to avoid hydrateChildren() treating `<!--]-->`
+    // as an extra child of the current container.
+    return isComment(node, '[')
+      ? (vnode.anchor as Node).nextSibling
+      : (vnode.anchor as Node)
   },
 
   setTransitionHooks(component, hooks) {