diff --git a/package.json b/package.json
index 62dcb91d42d..6e54566de9e 100644
--- a/package.json
+++ b/package.json
@@ -98,8 +98,8 @@
     "pug": "^3.0.3",
     "puppeteer": "~24.16.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.46.4",
-    "rollup-plugin-dts": "^6.2.3",
+    "rollup": "4.45.1",
+    "rollup-plugin-dts": "6.2.1",
     "rollup-plugin-esbuild": "^6.2.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "semver": "^7.7.2",
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 36ac6547709..fe413753548 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1021,6 +1021,11 @@ export function compileScript(
     : ''
   // wrap setup code with function.
   if (ctx.isTS) {
+    // in SSR, always use defineComponent, so __vapor flag is required
+    if (ssr && vapor) {
+      runtimeOptions += `\n  __vapor: true,`
+    }
+
     // for TS, make sure the exported type is still valid type with
     // correct props information
     // we have to use object spread for types to be merged properly
diff --git a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
index b544adadcf3..7867a4b5fb5 100644
--- a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
@@ -82,15 +82,15 @@ describe('ssr: v-if', () => {
   test('<template v-if> (text)', () => {
     expect(compile(`<template v-if="foo">hello</template>`).code)
       .toMatchInlineSnapshot(`
-      "
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<!--[-->hello<!--]-->\`)
-        } else {
-          _push(\`<!---->\`)
-        }
-      }"
-    `)
+        "
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<!--[-->hello<!--]-->\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+        }"
+      `)
   })
 
   test('<template v-if> (single element)', () => {
diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 9f2183ce83e..41e2e776bd9 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compile > bindings 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   _renderEffect(() => _setText(x0, "count is " + _toDisplayString(_ctx.count) + "."))
   return n0
 }"
@@ -38,7 +38,7 @@ export function render(_ctx) {
     "default": () => {
       const n0 = _createIf(() => (true), () => {
         const n3 = t0()
-        _setInsertionState(n3)
+        _setInsertionState(n3, null)
         const n2 = _createComponentWithFallback(_component_Bar)
         _withVaporDirectives(n2, [[_directive_hello, void 0, void 0, { world: true }]])
         return n3
@@ -157,9 +157,9 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const _component_Comp = _resolveComponent("Comp")
   const n0 = t0()
   const n3 = t1()
-  const n2 = _child(n3)
   _setInsertionState(n3, 0)
   const n1 = _createComponentWithFallback(_component_Comp)
+  const n2 = _child(n3)
   _renderEffect(() => {
     _setProp(n3, "id", _ctx.foo)
     _setText(n2, _toDisplayString(_ctx.bar))
@@ -180,13 +180,13 @@ export function render(_ctx) {
 `;
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
+"import { txt as _txt, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
 const t0 = _template("<button> </button>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
   const n0 = t0()
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   n0.$evtclick = e => _ctx.handleClick(e)
   _renderEffect(() => {
     const _count = _ctx.count
@@ -198,12 +198,12 @@ export function render(_ctx) {
 `;
 
 exports[`compile > execution order > basic 1`] = `
-"import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { txt as _txt, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   _renderEffect(() => {
     _setProp(n0, "id", _ctx.foo)
     _setText(x0, _toDisplayString(_ctx.bar))
@@ -220,16 +220,16 @@ export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n3 = t0()
   const n1 = _child(n3)
-  _setInsertionState(n1)
+  _setInsertionState(n1, null)
   const n0 = _createSlot("default", null)
-  _setInsertionState(n3)
+  _setInsertionState(n3, 1)
   const n2 = _createComponentWithFallback(_component_Comp)
   return n3
 }"
 `;
 
 exports[`compile > execution order > with v-once 1`] = `
-"import { child as _child, next as _next, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, next as _next, nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><span> </span> <br> </div>", true)
 
 export function render(_ctx) {
@@ -237,7 +237,7 @@ export function render(_ctx) {
   const n0 = _child(n3)
   const n1 = _next(n0)
   const n2 = _nthChild(n3, 3)
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   _setText(x0, _toDisplayString(_ctx.foo))
   _renderEffect(() => {
     _setText(n1, " " + _toDisplayString(_ctx.bar))
@@ -280,30 +280,6 @@ export function render(_ctx) {
 }"
 `;
 
-exports[`compile > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
-"import { resolveComponent as _resolveComponent, child as _child, next as _next, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<div><div></div><!><div></div><!><div><button></button></div></div>", true)
-
-export function render(_ctx) {
-  const _component_Comp = _resolveComponent("Comp")
-  const n6 = t1()
-  const n5 = _next(_child(n6))
-  const n7 = _nthChild(n6, 3)
-  const p0 = _next(n7)
-  const n4 = _child(p0)
-  _setInsertionState(n6, n5)
-  const n0 = _createComponentWithFallback(_component_Comp)
-  _setInsertionState(n6, n7)
-  const n1 = _createIf(() => (true), () => {
-    const n3 = t0()
-    return n3
-  })
-  _renderEffect(() => _setProp(n4, "disabled", _ctx.foo))
-  return n6
-}"
-`;
-
 exports[`compile > static + dynamic root 1`] = `
 "import { toDisplayString as _toDisplayString, setText as _setText, template as _template } from 'vue';
 const t0 = _template(" ")
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index 7963a9e98c2..ae59cc78e0c 100644
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -221,23 +221,6 @@ describe('compile', () => {
     })
   })
 
-  describe('setInsertionState', () => {
-    test('next, child and nthChild should be above the setInsertionState', () => {
-      const code = compile(`
-      <div>
-        <div />
-        <Comp />
-        <div />
-        <div v-if="true" />
-        <div>
-          <button :disabled="foo" />
-        </div>
-      </div>
-      `)
-      expect(code).toMatchSnapshot()
-    })
-  })
-
   describe('execution order', () => {
     test('basic', () => {
       const code = compile(`<div :id="foo">{{ bar }}</div>`)
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
index fda0121d632..2d4da87c35e 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
@@ -42,13 +42,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: expression > empty interpolation 4`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
   const n0 = _child(n1)
-  const x1 = _child(n1)
+  const x1 = _txt(n1)
   _renderEffect(() => {
     const _foo = _ctx.foo
     _setText(n0, _toDisplayString(_foo))
@@ -81,13 +81,13 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 `;
 
 exports[`compiler: expression > update expression 1`] = `
-"import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, txt as _txt, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
   const n0 = _child(n1)
-  const x1 = _child(n1)
+  const x1 = _txt(n1)
   _renderEffect(() => {
     const _String = String
     const _foo = _ctx.foo
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
index 6a353b771ff..c56b683323d 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
@@ -18,7 +18,7 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: children transform > children & sibling references 1`] = `
-"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><p> </p> <p> </p></div>", true)
 
 export function render(_ctx) {
@@ -26,8 +26,8 @@ export function render(_ctx) {
   const n0 = _child(n3)
   const n1 = _next(n0)
   const n2 = _next(n1)
-  const x0 = _child(n0)
-  const x2 = _child(n2)
+  const x0 = _txt(n0)
+  const x2 = _txt(n2)
   _renderEffect(() => {
     _setText(x0, _toDisplayString(_ctx.first))
     _setText(n1, " " + _toDisplayString(_ctx.second) + " " + _toDisplayString(_ctx.third) + " ")
@@ -38,20 +38,20 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: children transform > efficient find 1`] = `
-"import { child as _child, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><div>x</div><div>x</div><div> </div></div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
   const n0 = _nthChild(n1, 2)
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   _renderEffect(() => _setText(x0, _toDisplayString(_ctx.msg)))
   return n1
 }"
 `;
 
 exports[`compiler: children transform > efficient traversal 1`] = `
-"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div><div>x</div><div><span> </span></div><div><span> </span></div><div><span> </span></div></div>", true)
 
 export function render(_ctx) {
@@ -62,9 +62,9 @@ export function render(_ctx) {
   const n1 = _child(p1)
   const p2 = _next(p1)
   const n2 = _child(p2)
-  const x0 = _child(n0)
-  const x1 = _child(n1)
-  const x2 = _child(n2)
+  const x0 = _txt(n0)
+  const x1 = _txt(n1)
+  const x2 = _txt(n2)
   _renderEffect(() => {
     const _msg = _ctx.msg
     _setText(x0, _toDisplayString(_msg))
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 69c695a246a..2d6def4e127 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: v-for > array de-structured value (with rest) 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value[0] + _for_item0.value.slice(1) + _for_key0.value)))
     return n2
   }, ([id, ...other], index) => (id))
@@ -16,13 +16,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > array de-structured value 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value[0] + _for_item0.value[1] + _for_key0.value)))
     return n2
   }, ([id, other], index) => (id))
@@ -31,14 +31,14 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > basic v-for 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     n2.$evtclick = () => (_ctx.remove(_for_item0.value))
     _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value)))
     return n2
@@ -48,13 +48,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > key only binding pattern 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<tr> </tr>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _setText(x2, _toDisplayString(_for_item0.value.id + _for_item0.value.id))
     return n2
   }, (row) => (row.id))
@@ -80,17 +80,17 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > nested v-for 1`] = `
-"import { setInsertionState as _setInsertionState, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { setInsertionState as _setInsertionState, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<span> </span>")
 const t1 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
     const n5 = t1()
-    _setInsertionState(n5)
+    _setInsertionState(n5, null)
     const n2 = _createFor(() => (_for_item0.value), (_for_item1) => {
       const n4 = t0()
-      const x4 = _child(n4)
+      const x4 = _txt(n4)
       _renderEffect(() => _setText(x4, _toDisplayString(_for_item1.value+_for_item0.value)))
       return n4
     }, undefined, 1)
@@ -101,13 +101,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > object de-structured value (with rest) 1`] = `
-"import { getRestElement as _getRestElement, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { getRestElement as _getRestElement, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value.id + _getRestElement(_for_item0.value, ["id"]) + _for_key0.value)))
     return n2
   }, ({ id, ...other }, index) => (id))
@@ -116,13 +116,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > object de-structured value 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<span> </span>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value.id) + _toDisplayString(_for_item0.value.value)))
     return n2
   }, ({ id, value }) => (id))
@@ -131,13 +131,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > object value, key and index 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0, _for_index0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_for_item0.value + _for_key0.value + _for_index0.value)))
     return n2
   }, (value, key, index) => (key))
@@ -146,14 +146,14 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > selector pattern 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<tr> </tr>", true)
 
 export function render(_ctx) {
   let _selector0_0
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _selector0_0(() => {
       _setText(x2, _toDisplayString(_ctx.selected === _for_item0.value.id ? 'danger' : ''))
     })
@@ -221,13 +221,13 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
-"import { getDefaultValue as _getDefaultValue, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
+"import { getDefaultValue as _getDefaultValue, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_getDefaultValue(_for_item0.value.foo, _ctx.bar) + _ctx.bar + _ctx.baz + _getDefaultValue(_for_item0.value.baz[0], _ctx.quux) + _ctx.quux)))
     return n2
   })
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index c41dc9226c5..c60ae16be05 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler: v-if > basic v-if 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
-    const x2 = _child(n2)
+    const x2 = _txt(n2)
     _renderEffect(() => _setText(x2, _toDisplayString(_ctx.msg)))
     return n2
   })
@@ -16,7 +16,7 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-if > comment between branches 1`] = `
-"import { createIf as _createIf, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { createIf as _createIf, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 const t1 = _template("<!--foo-->")
 const t2 = _template("<p></p>")
@@ -38,7 +38,7 @@ export function render(_ctx) {
     return [n10, n11]
   }))
   const n13 = t5()
-  const x13 = _child(n13)
+  const x13 = _txt(n13)
   _renderEffect(() => _setText(x13, _toDisplayString(_ctx.text)))
   return [n0, n13]
 }"
@@ -62,7 +62,7 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: v-if > template v-if 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 const t1 = _template("hello")
 const t2 = _template("<p> </p>", true)
@@ -72,7 +72,7 @@ export function render(_ctx) {
     const n2 = t0()
     const n3 = t1()
     const n4 = t2()
-    const x4 = _child(n4)
+    const x4 = _txt(n4)
     _renderEffect(() => _setText(x4, _toDisplayString(_ctx.msg)))
     return [n2, n3, n4]
   })
@@ -144,12 +144,12 @@ const t3 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n8 = t3()
-  _setInsertionState(n8)
+  _setInsertionState(n8, null)
   const n0 = _createIf(() => (_ctx.foo), () => {
     const n2 = t0()
     return n2
   })
-  _setInsertionState(n8)
+  _setInsertionState(n8, null)
   const n3 = _createIf(() => (_ctx.bar), () => {
     const n5 = t1()
     return n5
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index b6107d5a1a1..4ca745ef0f5 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -42,7 +42,7 @@ const t0 = _template("<div></div>", true)
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
   const n1 = t0()
-  _setInsertionState(n1)
+  _setInsertionState(n1, null)
   const n0 = _createComponentWithFallback(_component_Comp, { id: () => (_ctx.foo) }, null, null, true)
   return n1
 }"
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index f296d7257d0..298d1032c8e 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -261,9 +261,9 @@ export function render(_ctx) {
   const _component_Foo = _resolveComponent("Foo")
   const _component_Bar = _resolveComponent("Bar")
   const n6 = t0()
-  _setInsertionState(n6)
+  _setInsertionState(n6, null)
   const n0 = _createSlot("foo", null)
-  _setInsertionState(n6)
+  _setInsertionState(n6, null)
   const n1 = _createIf(() => (true), () => {
     const n3 = _createComponentWithFallback(_component_Foo)
     return n3
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
index 9a3b88acba3..a4f6bf54747 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
@@ -1,24 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`v-text > should convert v-text to setText 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   _renderEffect(() => _setText(x0, _toDisplayString(_ctx.str)))
   return n0
 }"
 `;
 
 exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div> </div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
-  const x0 = _child(n0)
+  const x0 = _txt(n0)
   _renderEffect(() => _setText(x0, _toDisplayString(_ctx.test)))
   return n0
 }"
diff --git a/packages/compiler-vapor/src/generators/block.ts b/packages/compiler-vapor/src/generators/block.ts
index a4f98dfdffa..6a3aa23e9a3 100644
--- a/packages/compiler-vapor/src/generators/block.ts
+++ b/packages/compiler-vapor/src/generators/block.ts
@@ -66,7 +66,7 @@ export function genBlockContent(
   }
   for (const child of dynamic.children) {
     if (!child.hasDynamicChild) {
-      push(...genChildren(child, context, push, `n${child.id!}`))
+      push(...genChildren(child, context, `n${child.id!}`))
     }
   }
 
diff --git a/packages/compiler-vapor/src/generators/operation.ts b/packages/compiler-vapor/src/generators/operation.ts
index 13ce5477cc1..beefab6cf5f 100644
--- a/packages/compiler-vapor/src/generators/operation.ts
+++ b/packages/compiler-vapor/src/generators/operation.ts
@@ -168,16 +168,23 @@ function genInsertionState(
   operation: InsertionStateTypes,
   context: CodegenContext,
 ): CodeFragment[] {
+  const { parent, anchor, append } = operation
   return [
     NEWLINE,
     ...genCall(
       context.helper('setInsertionState'),
-      `n${operation.parent}`,
-      operation.anchor == null
+      `n${parent}`,
+      anchor == null
         ? undefined
-        : operation.anchor === -1 // -1 indicates prepend
+        : anchor === -1 // -1 indicates prepend
           ? `0` // runtime anchor value for prepend
-          : `n${operation.anchor}`,
+          : append // -2 indicates append
+            ? // null or number > 0 for append
+              // number > 0 is used for locate the previous static node during hydration
+              anchor === 0
+              ? 'null'
+              : `${anchor}`
+            : `n${anchor}`,
     ),
   ]
 }
diff --git a/packages/compiler-vapor/src/generators/template.ts b/packages/compiler-vapor/src/generators/template.ts
index 2b8a9ea0e04..b550b2e3d2c 100644
--- a/packages/compiler-vapor/src/generators/template.ts
+++ b/packages/compiler-vapor/src/generators/template.ts
@@ -36,7 +36,7 @@ export function genSelf(
   }
 
   if (hasDynamicChild) {
-    push(...genChildren(dynamic, context, push, `n${id}`))
+    push(...genChildren(dynamic, context, `n${id}`))
   }
 
   return frag
@@ -45,7 +45,6 @@ export function genSelf(
 export function genChildren(
   dynamic: IRDynamicInfo,
   context: CodegenContext,
-  pushBlock: (...items: CodeFragment[]) => number,
   from: string = `n${dynamic.id}`,
 ): CodeFragment[] {
   const { helper } = context
@@ -76,17 +75,17 @@ export function genChildren(
     // p for "placeholder" variables that are meant for possible reuse by
     // other access paths
     const variable = id === undefined ? `p${context.block.tempId++}` : `n${id}`
-    pushBlock(NEWLINE, `const ${variable} = `)
+    push(NEWLINE, `const ${variable} = `)
 
     if (prev) {
       if (elementIndex - prev[1] === 1) {
-        pushBlock(...genCall(helper('next'), prev[0]))
+        push(...genCall(helper('next'), prev[0]))
       } else {
-        pushBlock(...genCall(helper('nthChild'), from, String(elementIndex)))
+        push(...genCall(helper('nthChild'), from, String(elementIndex)))
       }
     } else {
       if (elementIndex === 0) {
-        pushBlock(...genCall(helper('child'), from))
+        push(...genCall(helper('child'), from))
       } else {
         // check if there's a node that we can reuse from
         let init = genCall(helper('child'), from)
@@ -95,7 +94,7 @@ export function genChildren(
         } else if (elementIndex > 1) {
           init = genCall(helper('nthChild'), from, String(elementIndex))
         }
-        pushBlock(...init)
+        push(...init)
       }
     }
 
@@ -108,7 +107,7 @@ export function genChildren(
     }
 
     prev = [variable, elementIndex]
-    push(...genChildren(child, context, pushBlock, variable))
+    push(...genChildren(child, context, variable))
   }
 
   return frag
diff --git a/packages/compiler-vapor/src/generators/text.ts b/packages/compiler-vapor/src/generators/text.ts
index 89e3167c664..6dd3efadf62 100644
--- a/packages/compiler-vapor/src/generators/text.ts
+++ b/packages/compiler-vapor/src/generators/text.ts
@@ -42,6 +42,6 @@ export function genGetTextChild(
 ): CodeFragment[] {
   return [
     NEWLINE,
-    `const x${oper.parent} = ${context.helper('child')}(n${oper.parent})`,
+    `const x${oper.parent} = ${context.helper('txt')}(n${oper.parent})`,
   ]
 }
diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts
index 18f0139ab56..4c849445036 100644
--- a/packages/compiler-vapor/src/ir/index.ts
+++ b/packages/compiler-vapor/src/ir/index.ts
@@ -76,6 +76,7 @@ export interface IfIRNode extends BaseIRNode {
   once?: boolean
   parent?: number
   anchor?: number
+  append?: boolean
 }
 
 export interface IRFor {
@@ -95,6 +96,7 @@ export interface ForIRNode extends BaseIRNode, IRFor {
   onlyChild: boolean
   parent?: number
   anchor?: number
+  append?: boolean
 }
 
 export interface SetPropIRNode extends BaseIRNode {
@@ -195,6 +197,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
   dynamic?: SimpleExpressionNode
   parent?: number
   anchor?: number
+  append?: boolean
 }
 
 export interface DeclareOldRefIRNode extends BaseIRNode {
@@ -210,6 +213,7 @@ export interface SlotOutletIRNode extends BaseIRNode {
   fallback?: BlockIRNode
   parent?: number
   anchor?: number
+  append?: boolean
 }
 
 export interface GetTextChildIRNode extends BaseIRNode {
diff --git a/packages/compiler-vapor/src/transforms/transformChildren.ts b/packages/compiler-vapor/src/transforms/transformChildren.ts
index 790cd9d6fb1..69250ab5c3b 100644
--- a/packages/compiler-vapor/src/transforms/transformChildren.ts
+++ b/packages/compiler-vapor/src/transforms/transformChildren.ts
@@ -59,7 +59,7 @@ export const transformChildren: NodeTransform = (node, context) => {
 
 function processDynamicChildren(context: TransformContext<ElementNode>) {
   let prevDynamics: IRDynamicInfo[] = []
-  let hasStaticTemplate = false
+  let staticCount = 0
   const children = context.dynamic.children
 
   for (const [index, child] of children.entries()) {
@@ -69,7 +69,7 @@ function processDynamicChildren(context: TransformContext<ElementNode>) {
 
     if (!(child.flags & DynamicFlag.NON_TEMPLATE)) {
       if (prevDynamics.length) {
-        if (hasStaticTemplate) {
+        if (staticCount) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`
           prevDynamics[0].flags -= DynamicFlag.NON_TEMPLATE
           const anchor = (prevDynamics[0].anchor = context.increaseId())
@@ -79,19 +79,20 @@ function processDynamicChildren(context: TransformContext<ElementNode>) {
         }
         prevDynamics = []
       }
-      hasStaticTemplate = true
+      staticCount++
     }
   }
 
   if (prevDynamics.length) {
-    registerInsertion(prevDynamics, context)
+    registerInsertion(prevDynamics, context, staticCount, true)
   }
 }
 
 function registerInsertion(
   dynamics: IRDynamicInfo[],
   context: TransformContext,
-  anchor?: number,
+  anchor: number,
+  append?: boolean,
 ) {
   for (const child of dynamics) {
     if (child.template != null) {
@@ -100,12 +101,13 @@ function registerInsertion(
         type: IRNodeTypes.INSERT_NODE,
         elements: dynamics.map(child => child.id!),
         parent: context.reference(),
-        anchor,
+        anchor: append ? undefined : anchor,
       })
     } else if (child.operation && isBlockOperation(child.operation)) {
       // block types
       child.operation.parent = context.reference()
       child.operation.anchor = anchor
+      child.operation.append = append
     }
   }
 }
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index a1409a7fe44..5dbfb071462 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -188,7 +188,14 @@ export interface VaporInteropInterface {
   unmount(vnode: VNode, doRemove?: boolean): void
   move(vnode: VNode, container: any, anchor: any): void
   slot(n1: VNode | null, n2: VNode, container: any, anchor: any): void
-
+  hydrate(
+    vnode: VNode,
+    node: any,
+    container: any,
+    anchor: any,
+    parentComponent: ComponentInternalInstance | null,
+  ): Node
+  hydrateSlot(vnode: VNode, node: any): Node
   vdomMount: (component: ConcreteComponent, props?: any, slots?: any) => any
   vdomUnmount: UnmountComponentFn
   vdomSlot: (
diff --git a/packages/runtime-core/src/apiLifecycle.ts b/packages/runtime-core/src/apiLifecycle.ts
index dce4d852def..e97bbcd5d54 100644
--- a/packages/runtime-core/src/apiLifecycle.ts
+++ b/packages/runtime-core/src/apiLifecycle.ts
@@ -37,7 +37,7 @@ export function injectHook(
         try {
           return callWithAsyncErrorHandling(hook, target, type, args)
         } finally {
-          setCurrentInstance(...prev)
+          setCurrentInstance.apply(null, prev)
           setActiveSub(prevSub)
         }
       })
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
index 7dce012d90b..5acd4849e42 100644
--- a/packages/runtime-core/src/apiWatch.ts
+++ b/packages/runtime-core/src/apiWatch.ts
@@ -292,7 +292,7 @@ export function instanceWatch(
   }
   const prev = setCurrentInstance(this)
   const res = doWatch(getter, cb.bind(publicThis), options)
-  setCurrentInstance(...prev)
+  setCurrentInstance.apply(null, prev)
   return res
 }
 
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 67d5a1b8720..744fdc407df 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -901,7 +901,7 @@ function setupStatefulComponent(
     )
     const isAsyncSetup = isPromise(setupResult)
     setActiveSub(prevSub)
-    setCurrentInstance(...prev)
+    setCurrentInstance.apply(null, prev)
 
     if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
       // async setup / serverPrefetch, mark as async boundary for useId()
@@ -1090,7 +1090,7 @@ export function finishComponentSetup(
       applyOptions(instance)
     } finally {
       setActiveSub(prevSub)
-      setCurrentInstance(...prevInstance)
+      setCurrentInstance.apply(null, prevInstance)
     }
   }
 
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index a535927cd07..a8f9b90fe8c 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -532,7 +532,7 @@ function baseResolveDefault(
       : null,
     props,
   )
-  setCurrentInstance(...prev)
+  setCurrentInstance.apply(null, prev)
   return value
 }
 
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 15b3c7512be..e3d9e837d30 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -5,6 +5,7 @@ import {
   Comment as VComment,
   type VNode,
   type VNodeHook,
+  VaporSlot,
   createTextVNode,
   createVNode,
   invokeVNodeHook,
@@ -36,7 +37,11 @@ import {
   normalizeStyle,
   stringifyStyle,
 } from '@vue/shared'
-import { type RendererInternals, needTransition } from './renderer'
+import {
+  type RendererInternals,
+  getVaporInterface,
+  needTransition,
+} from './renderer'
 import { setRef } from './rendererTemplateRef'
 import {
   type SuspenseBoundary,
@@ -259,6 +264,12 @@ export function createHydrationFunctions(
           )
         }
         break
+      case VaporSlot:
+        nextNode = getVaporInterface(parentComponent, vnode).hydrateSlot(
+          vnode,
+          node,
+        )
+        break
       default:
         if (shapeFlag & ShapeFlags.ELEMENT) {
           if (
@@ -279,10 +290,6 @@ export function createHydrationFunctions(
             )
           }
         } else if (shapeFlag & ShapeFlags.COMPONENT) {
-          if ((vnode.type as ConcreteComponent).__vapor) {
-            throw new Error('Vapor component hydration is not supported yet.')
-          }
-
           // when setting up the render effect, if the initial vnode already
           // has .el set, the component will perform hydration instead of mount
           // on its sub-tree.
@@ -303,15 +310,26 @@ export function createHydrationFunctions(
             nextNode = nextSibling(node)
           }
 
-          mountComponent(
-            vnode,
-            container,
-            null,
-            parentComponent,
-            parentSuspense,
-            getContainerType(container),
-            optimized,
-          )
+          // hydrate vapor component
+          if ((vnode.type as ConcreteComponent).__vapor) {
+            nextNode = getVaporInterface(parentComponent, vnode).hydrate(
+              vnode,
+              node,
+              container,
+              null,
+              parentComponent,
+            )
+          } else {
+            mountComponent(
+              vnode,
+              container,
+              null,
+              parentComponent,
+              parentSuspense,
+              getContainerType(container),
+              optimized,
+            )
+          }
 
           // #3787
           // if component is async, it may get moved / unmounted before its
@@ -641,6 +659,17 @@ export function createHydrationFunctions(
         )
       }
     }
+
+    // the server output does not contain blank text nodes. It appears here that
+    // it is a dynamically inserted anchor, and needs to be skipped.
+    // e.g. vaporInteropImpl.mount() > selfAnchor
+    if (
+      node &&
+      node.nodeType === DOMNodeTypes.TEXT &&
+      !(node as Text).data.trim()
+    ) {
+      node = nextSibling(node)
+    }
     return node
   }
 
@@ -851,35 +880,61 @@ function propHasMismatch(
       mismatchType = MismatchTypes.STYLE
       mismatchKey = 'style'
     }
-  } else if (
-    (el instanceof SVGElement && isKnownSvgAttr(key)) ||
-    (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
-  ) {
-    if (isBooleanAttr(key)) {
-      actual = el.hasAttribute(key)
-      expected = includeBooleanAttr(clientValue)
-    } else if (clientValue == null) {
-      actual = el.hasAttribute(key)
-      expected = false
-    } else {
-      if (el.hasAttribute(key)) {
-        actual = el.getAttribute(key)
-      } else if (key === 'value' && el.tagName === 'TEXTAREA') {
-        // #10000 textarea.value can't be retrieved by `hasAttribute`
-        actual = (el as HTMLTextAreaElement).value
-      } else {
-        actual = false
-      }
-      expected = isRenderableAttrValue(clientValue)
-        ? String(clientValue)
-        : false
-    }
+  } else if (isValidHtmlOrSvgAttribute(el, key)) {
+    ;({ actual, expected } = getAttributeMismatch(el, key, clientValue))
     if (actual !== expected) {
       mismatchType = MismatchTypes.ATTRIBUTE
       mismatchKey = key
     }
   }
 
+  return warnPropMismatch(el, mismatchKey, mismatchType, actual, expected)
+}
+
+export function getAttributeMismatch(
+  el: Element,
+  key: string,
+  clientValue: any,
+): {
+  actual: string | boolean | null | undefined
+  expected: string | boolean | null | undefined
+} {
+  let actual: string | boolean | null | undefined
+  let expected: string | boolean | null | undefined
+  if (isBooleanAttr(key)) {
+    actual = el.hasAttribute(key)
+    expected = includeBooleanAttr(clientValue)
+  } else if (clientValue == null) {
+    actual = el.hasAttribute(key)
+    expected = false
+  } else {
+    if (el.hasAttribute(key)) {
+      actual = el.getAttribute(key)
+    } else if (key === 'value' && el.tagName === 'TEXTAREA') {
+      // #10000 textarea.value can't be retrieved by `hasAttribute`
+      actual = (el as HTMLTextAreaElement).value
+    } else {
+      actual = false
+    }
+    expected = isRenderableAttrValue(clientValue) ? String(clientValue) : false
+  }
+  return { actual, expected }
+}
+
+export function isValidHtmlOrSvgAttribute(el: Element, key: string): boolean {
+  return (
+    (el instanceof SVGElement && isKnownSvgAttr(key)) ||
+    (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
+  )
+}
+
+export function warnPropMismatch(
+  el: Element & { $cls?: string },
+  mismatchKey: string | undefined,
+  mismatchType: MismatchTypes | undefined,
+  actual: string | boolean | null | undefined,
+  expected: string | boolean | null | undefined,
+): boolean {
   if (mismatchType != null && !isMismatchAllowed(el, mismatchType)) {
     const format = (v: any) =>
       v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
@@ -902,11 +957,11 @@ function propHasMismatch(
   return false
 }
 
-function toClassSet(str: string): Set<string> {
+export function toClassSet(str: string): Set<string> {
   return new Set(str.trim().split(/\s+/))
 }
 
-function isSetEqual(a: Set<string>, b: Set<string>): boolean {
+export function isSetEqual(a: Set<string>, b: Set<string>): boolean {
   if (a.size !== b.size) {
     return false
   }
@@ -918,7 +973,7 @@ function isSetEqual(a: Set<string>, b: Set<string>): boolean {
   return true
 }
 
-function toStyleMap(str: string): Map<string, string> {
+export function toStyleMap(str: string): Map<string, string> {
   const styleMap: Map<string, string> = new Map()
   for (const item of str.split(';')) {
     let [key, value] = item.split(':')
@@ -931,7 +986,10 @@ function toStyleMap(str: string): Map<string, string> {
   return styleMap
 }
 
-function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
+export function isMapEqual(
+  a: Map<string, string>,
+  b: Map<string, string>,
+): boolean {
   if (a.size !== b.size) {
     return false
   }
@@ -973,7 +1031,7 @@ function resolveCssVars(
 
 const allowMismatchAttr = 'data-allow-mismatch'
 
-enum MismatchTypes {
+export enum MismatchTypes {
   TEXT = 0,
   CHILDREN = 1,
   CLASS = 2,
@@ -989,7 +1047,7 @@ const MismatchTypeString: Record<MismatchTypes, string> = {
   [MismatchTypes.ATTRIBUTE]: 'attribute',
 } as const
 
-function isMismatchAllowed(
+export function isMismatchAllowed(
   el: Element | null,
   allowedType: MismatchTypes,
 ): boolean {
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 9d97bb18593..a93be3c9bda 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -562,6 +562,20 @@ export { initFeatureFlags } from './featureFlags'
  * @internal
  */
 export { createInternalObject } from './internalObject'
+/**
+ * @internal
+ */
+export {
+  MismatchTypes,
+  isMismatchAllowed,
+  toClassSet,
+  isSetEqual,
+  warnPropMismatch,
+  toStyleMap,
+  isMapEqual,
+  isValidHtmlOrSvgAttribute,
+  getAttributeMismatch,
+} from './hydration'
 /**
  * @internal
  */
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 17ae7c6aba3..3cfd4ba4703 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -108,6 +108,7 @@ export interface Renderer<HostElement = RendererElement> {
 
 export interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
   hydrate: RootHydrateFunction
+  hydrateNode: ReturnType<typeof createHydrationFunctions>[1]
 }
 
 export type ElementNamespace = 'svg' | 'mathml' | undefined
@@ -2601,6 +2602,7 @@ function baseCreateRenderer(
   return {
     render,
     hydrate,
+    hydrateNode,
     internals,
     createApp: createAppAPI(
       mountApp,
@@ -2724,7 +2726,10 @@ export function invalidateMount(hooks: LifecycleHook | undefined): void {
   }
 }
 
-function getVaporInterface(
+/**
+ * @internal
+ */
+export function getVaporInterface(
   instance: ComponentInternalInstance | null,
   vnode: VNode,
 ): VaporInteropInterface {
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index b241458dba7..75d4334348d 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -319,7 +319,7 @@ export * from './jsx'
 /**
  * @internal
  */
-export { ensureRenderer, normalizeContainer }
+export { ensureRenderer, ensureHydrationRenderer, normalizeContainer }
 /**
  * @internal
  */
diff --git a/packages/runtime-vapor/__tests__/dom/prop.spec.ts b/packages/runtime-vapor/__tests__/dom/prop.spec.ts
index 9d07b413541..bbad71a4dd9 100644
--- a/packages/runtime-vapor/__tests__/dom/prop.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/prop.spec.ts
@@ -18,7 +18,7 @@ let removeComponentInstance = NOOP
 beforeEach(() => {
   const instance = new VaporComponentInstance({}, {}, null)
   const prev = setCurrentInstance(instance)
-  removeComponentInstance = () => setCurrentInstance(...prev)
+  removeComponentInstance = () => setCurrentInstance.apply(null, prev)
 })
 afterEach(() => {
   removeComponentInstance()
diff --git a/packages/runtime-vapor/__tests__/dom/template.spec.ts b/packages/runtime-vapor/__tests__/dom/template.spec.ts
index 85de30987a5..792c55242b1 100644
--- a/packages/runtime-vapor/__tests__/dom/template.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/template.spec.ts
@@ -20,8 +20,8 @@ describe('api: template', () => {
 
   test('nthChild', () => {
     const t = template('<div><span><b>nested</b></span><p></p></div>')
-    const root = t()
-    const span = nthChild(root, 0)
+    const root = t() as ParentNode
+    const span = nthChild(root, 0) as ParentNode
     const b = nthChild(span, 0)
     const p = nthChild(root, 1)
     expect(span).toBe(root.firstChild)
@@ -31,7 +31,7 @@ describe('api: template', () => {
 
   test('next', () => {
     const t = template('<div><span></span><b></b><p></p></div>')
-    const root = t()
+    const root = t() as ParentNode
     const span = child(root as ParentNode)
     const b = next(span)
 
diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts
index 6ba2bf895fb..38faf38969d 100644
--- a/packages/runtime-vapor/__tests__/hydration.spec.ts
+++ b/packages/runtime-vapor/__tests__/hydration.spec.ts
@@ -1,9 +1,17 @@
 import { createVaporSSRApp, delegateEvents } from '../src'
-import { nextTick, ref } from '@vue/runtime-dom'
+import { nextTick, reactive, ref } from '@vue/runtime-dom'
 import { compileScript, parse } from '@vue/compiler-sfc'
 import * as runtimeVapor from '../src'
 import * as runtimeDom from '@vue/runtime-dom'
 import * as VueServerRenderer from '@vue/server-renderer'
+import { isString } from '@vue/shared'
+
+const formatHtml = (raw: string) => {
+  return raw
+    .replace(/<!--\[/g, '\n<!--[')
+    .replace(/]-->/g, ']-->\n')
+    .replace(/\n{2,}/g, '\n')
+}
 
 const Vue = { ...runtimeDom, ...runtimeVapor }
 
@@ -11,7 +19,7 @@ function compile(
   sfc: string,
   data: runtimeDom.Ref<any>,
   components: Record<string, any> = {},
-  ssr = false,
+  { vapor = true, ssr = false } = {},
 ) {
   if (!sfc.includes(`<script`)) {
     sfc =
@@ -25,7 +33,7 @@ function compile(
     isProd: true,
     inlineTemplate: true,
     genDefaultAs: '__sfc__',
-    vapor: true,
+    vapor,
     templateOptions: {
       ssr,
     },
@@ -47,19 +55,74 @@ function compile(
   )
 }
 
+async function testWithVaporApp(
+  code: string,
+  components?: Record<string, string | { code: string; vapor: boolean }>,
+  data?: any,
+) {
+  return testHydration(code, components, data, {
+    isVaporApp: true,
+    interop: true,
+  })
+}
+
+async function testWithVDOMApp(
+  code: string,
+  components?: Record<string, string | { code: string; vapor: boolean }>,
+  data?: any,
+) {
+  return testHydration(code, components, data, {
+    isVaporApp: false,
+    interop: true,
+  })
+}
+
+async function mountWithHydration(
+  html: string,
+  code: string,
+  data: runtimeDom.Ref<any>,
+) {
+  const container = document.createElement('div')
+  container.innerHTML = html
+
+  const clientComp = compile(`<template>${code}</template>`, data, undefined, {
+    vapor: true,
+    ssr: false,
+  })
+  const app = createVaporSSRApp(clientComp)
+  app.mount(container)
+
+  return {
+    container,
+  }
+}
+
 async function testHydration(
   code: string,
-  components: Record<string, string> = {},
+  components: Record<string, string | { code: string; vapor: boolean }> = {},
+  data: any = ref('foo'),
+  { isVaporApp = true, interop = false } = {},
 ) {
-  const data = ref('foo')
   const ssrComponents: any = {}
   const clientComponents: any = {}
   for (const key in components) {
-    clientComponents[key] = compile(components[key], data, clientComponents)
-    ssrComponents[key] = compile(components[key], data, ssrComponents, true)
+    const comp = components[key]
+    const code = isString(comp) ? comp : comp.code
+    const isVaporComp = isString(comp) || !!comp.vapor
+    clientComponents[key] = compile(code, data, clientComponents, {
+      vapor: isVaporComp,
+      ssr: false,
+    })
+    ssrComponents[key] = compile(code, data, ssrComponents, {
+      vapor: isVaporComp,
+      ssr: true,
+    })
   }
 
-  const serverComp = compile(code, data, ssrComponents, true)
+  const serverComp = compile(code, data, ssrComponents, {
+    vapor: isVaporApp,
+    ssr: true,
+  })
   const html = await VueServerRenderer.renderToString(
     runtimeDom.createSSRApp(serverComp),
   )
@@ -67,8 +130,21 @@ async function testHydration(
   document.body.appendChild(container)
   container.innerHTML = html
 
-  const clientComp = compile(code, data, clientComponents)
-  const app = createVaporSSRApp(clientComp)
+  const clientComp = compile(code, data, clientComponents, {
+    vapor: isVaporApp,
+    ssr: false,
+  })
+  let app
+  if (isVaporApp) {
+    app = createVaporSSRApp(clientComp)
+  } else {
+    app = runtimeDom.createSSRApp(clientComp)
+  }
+
+  if (interop) {
+    app.use(runtimeVapor.vaporInteropPlugin)
+  }
+
   app.mount(container)
   return { data, container }
 }
@@ -78,72 +154,203 @@ const triggerEvent = (type: string, el: Element) => {
   el.dispatchEvent(event)
 }
 
-describe('Vapor Mode hydration', () => {
-  delegateEvents('click')
+delegateEvents('click')
 
-  beforeEach(() => {
-    document.body.innerHTML = ''
-  })
+beforeEach(() => {
+  document.body.innerHTML = ''
+})
 
-  test('root text', async () => {
-    const { data, container } = await testHydration(`
+describe('Vapor Mode hydration', () => {
+  describe('text', () => {
+    test('root text', async () => {
+      const { data, container } = await testHydration(`
       <template>{{ data }}</template>
     `)
-    expect(container.innerHTML).toMatchInlineSnapshot(`"foo"`)
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"foo"`)
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(`"bar"`)
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"bar"`)
+    })
+
+    test('consecutive text nodes', async () => {
+      const { data, container } = await testHydration(`
+      <template>{{ data }}{{ data }}</template>
+    `)
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"foofoo"`)
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"barbar"`)
+    })
+
+    test('consecutive text nodes with insertion anchor', async () => {
+      const { data, container } = await testHydration(`
+      <template><span/>{{ data }}{{ data }}<span/></template>
+    `)
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span></span>foofoo<span></span><!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span></span>barbar<span></span><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('mixed text nodes', async () => {
+      const { data, container } = await testHydration(`
+      <template>{{ data }}A{{ data }}B{{ data }}</template>
+    `)
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"fooAfooBfoo"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"barAbarBbar"`,
+      )
+    })
+
+    test('mixed text nodes with insertion anchor', async () => {
+      const { data, container } = await testHydration(`
+      <template><span/>{{ data }}A{{ data }}B{{ data }}<span/></template>
+    `)
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span></span>fooAfooBfoo<span></span><!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span></span>barAbarBbar<span></span><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('empty text node', async () => {
+      const data = reactive({ txt: '' })
+      const { container } = await testHydration(
+        `<template><div>{{ data.txt }}</div></template>`,
+        undefined,
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div></div>"`,
+      )
+
+      data.txt = 'foo'
+      await nextTick()
+      expect(formatHtml(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(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><!--]-->
+        "
+      `,
+      )
+
+      data.txt = 'foo'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->foo<!--]-->
+        "
+      `,
+      )
+    })
   })
 
-  test('root comment', async () => {
-    const { container } = await testHydration(`
+  describe('element', () => {
+    test('root comment', async () => {
+      const { container } = await testHydration(`
       <template><!----></template>
     `)
-    expect(container.innerHTML).toBe('<!---->')
-    expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
-  })
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"<!---->"`)
+      expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
+    })
 
-  test('root with mixed element and text', async () => {
-    const { container, data } = await testHydration(`
+    test('root with mixed element and text', async () => {
+      const { container, data } = await testHydration(`
       <template> A<span>{{ data }}</span>{{ data }}</template>
     `)
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[--> A<span>foo</span>foo<!--]-->"`,
-    )
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[--> A<span>bar</span>bar<!--]-->"`,
-    )
-  })
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--> A<span>foo</span>foo<!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--> A<span>bar</span>bar<!--]-->
+        "
+      `,
+      )
+    })
 
-  test('empty element', async () => {
-    const { container } = await testHydration(`
+    test('empty element', async () => {
+      const { container } = await testHydration(`
       <template><div/></template>
     `)
-    expect(container.innerHTML).toBe('<div></div>')
-    expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
-  })
-
-  test('element with binding and text children', async () => {
-    const { container, data } = await testHydration(`
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div></div>"`,
+      )
+      expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
+    })
+
+    test('element with binding and text children', async () => {
+      const { container, data } = await testHydration(`
       <template><div :class="data">{{ data }}</div></template>
     `)
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="foo">foo</div>"`,
-    )
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="bar">bar</div>"`,
-    )
-  })
-
-  test('element with elements children', async () => {
-    const { container } = await testHydration(`
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div class="foo">foo</div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div class="bar">bar</div>"`,
+      )
+    })
+
+    test('element with elements children', async () => {
+      const { container } = await testHydration(`
       <template>
         <div>
           <span>{{ data }}</span>
@@ -151,99 +358,140 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
     `)
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span>foo</span><span class="foo"></span></div>"`,
-    )
-
-    // event handler
-    triggerEvent('click', container.querySelector('.foo')!)
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo</span><span class="foo"></span></div>"`,
+      )
+
+      // event handler
+      triggerEvent('click', container.querySelector('.foo')!)
+
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>bar</span><span class="bar"></span></div>"`,
+      )
+    })
+
+    test('element with ref', async () => {
+      const { data, container } = await testHydration(
+        `<template>
+          <div ref="data">hi</div>
+        </template>
+      `,
+        {},
+        ref(null),
+      )
 
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span>bar</span><span class="bar"></span></div>"`,
-    )
+      expect(data.value).toBe(container.firstChild)
+    })
   })
 
-  test('basic component', async () => {
-    const { container, data } = await testHydration(
-      `
+  describe('component', () => {
+    test('basic component', async () => {
+      const { container, data } = await testHydration(
+        `
       <template><div><span></span><components.Child/></div></template>
       `,
-      { Child: `<template>{{ data }}</template>` },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span>foo</div>"`,
-    )
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span>bar</div>"`,
-    )
-  })
-
-  test('fragment component', async () => {
-    const { container, data } = await testHydration(
-      `
+        { Child: `<template>{{ data }}</template>` },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>foo</div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>bar</div>"`,
+      )
+    })
+
+    test('fragment component', async () => {
+      const { container, data } = await testHydration(
+        `
       <template><div><span></span><components.Child/></div></template>
       `,
-      { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span><!--[--><div>foo</div>-foo-<!--]--></div>"`,
-    )
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span><!--[--><div>bar</div>-bar-<!--]--></div>"`,
-    )
-  })
+        { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        </div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        </div>"
+      `,
+      )
+    })
 
-  test('fragment component with prepend', async () => {
-    const { container, data } = await testHydration(
-      `
+    test('fragment component with prepend', async () => {
+      const { container, data } = await testHydration(
+        `
       <template><div><components.Child/><span></span></div></template>
       `,
-      { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><!--[--><div>foo</div>-foo-<!--]--><span></span></div>"`,
-    )
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><!--[--><div>bar</div>-bar-<!--]--><span></span></div>"`,
-    )
-  })
+        { Child: `<template><div>{{ data }}</div>-{{ data }}-</template>` },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  test('nested fragment components', async () => {
-    const { container, data } = await testHydration(
-      `
+    test('nested fragment components', async () => {
+      const { container, data } = await testHydration(
+        `
       <template><div><components.Parent/><span></span></div></template>
       `,
-      {
-        Parent: `<template><div/><components.Child/><div/></template>`,
-        Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
-      },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><!--[--><div></div><!--[--><div>foo</div>-foo-<!--]--><div></div><!--]--><span></span></div>"`,
-    )
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><!--[--><div></div><!--[--><div>bar</div>-bar-<!--]--><div></div><!--]--><span></span></div>"`,
-    )
-  })
+        {
+          Parent: `<template><div/><components.Child/><div/></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div></div>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <div></div><!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div></div>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <div></div><!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  // problem is the <!> placeholder does not exist in SSR output
-  test.todo('component with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
-      <template>
+    test('component with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -251,1543 +499,3231 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template>{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot()
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot()
-  })
-
-  test.todo('consecutive component with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+        {
+          Child: `<template>{{ data }}</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>foo<span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>bar<span></span></div>"`,
+      )
+    })
+
+    test('nested components with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><components.Parent/></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>foo</div><span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>bar</div><span></span></div>"`,
+      )
+    })
+
+    test('nested components with multi level anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><div><span></span><components.Parent/><span></span></div></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div><span></span><div>foo</div><span></span></div><span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div><span></span><div>bar</div><span></span></div><span></span></div>"`,
+      )
+    })
+
+    test('consecutive components with insertion parent', async () => {
+      const data = reactive({ foo: 'foo', bar: 'bar' })
+      const { container } = await testHydration(
+        `<template>
+        <div>
+          <components.Child1/>
+          <components.Child2/>
+        </div>
+      </template>
+      `,
+        {
+          Child1: `<template><span>{{ data.foo }}</span></template>`,
+          Child2: `<template><span>{{ data.bar }}</span></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo</span><span>bar</span></div>"`,
+      )
+
+      data.foo = 'foo1'
+      data.bar = 'bar1'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo1</span><span>bar1</span></div>"`,
+      )
+    })
+
+    test('nested consecutive components with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><components.Parent/></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>foo</div><div>foo</div><span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>bar</div><div>bar</div><span></span></div>"`,
+      )
+    })
+
+    test('nested consecutive components with multi level anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><div><span></span><components.Parent/><span></span></div></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div><span></span><div>foo</div><div>foo</div><span></span></div><span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div><span></span><div>bar</div><div>bar</div><span></span></div><span></span></div>"`,
+      )
+    })
+
+    test('mixed component and element with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
+          <span/>
           <components.Child/>
           <span/>
         </div>
       </template>
       `,
-      {
-        Child: `<template>{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot()
-
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot()
-  })
-
-  test.todo('if')
-
-  test.todo('for')
-
-  test.todo('slots')
-
-  // test('element with ref', () => {
-  //   const el = ref()
-  //   const { vnode, container } = mountWithHydration('<div></div>', () =>
-  //     h('div', { ref: el }),
-  //   )
-  //   expect(vnode.el).toBe(container.firstChild)
-  //   expect(el.value).toBe(vnode.el)
-  // })
-
-  // test('with data-allow-mismatch component when using onServerPrefetch', async () => {
-  //   const Comp = {
-  //     template: `
-  //       <div>Comp2</div>
-  //     `,
-  //   }
-  //   let foo: any
-  //   const App = {
-  //     setup() {
-  //       const flag = ref(true)
-  //       foo = () => {
-  //         flag.value = false
-  //       }
-  //       onServerPrefetch(() => (flag.value = false))
-  //       return { flag }
-  //     },
-  //     components: {
-  //       Comp,
-  //     },
-  //     template: `
-  //       <span data-allow-mismatch>
-  //         <Comp v-if="flag"></Comp>
-  //       </span>
-  //     `,
-  //   }
-  //   // hydrate
-  //   const container = document.createElement('div')
-  //   container.innerHTML = await renderToString(h(App))
-  //   createSSRApp(App).mount(container)
-  //   expect(container.innerHTML).toBe(
-  //     '<span data-allow-mismatch=""><div>Comp2</div></span>',
-  //   )
-  //   foo()
-  //   await nextTick()
-  //   expect(container.innerHTML).toBe(
-  //     '<span data-allow-mismatch=""><!--v-if--></span>',
-  //   )
-  // })
-
-  // // compile SSR + client render fn from the same template & hydrate
-  // test('full compiler integration', async () => {
-  //   const mounted: string[] = []
-  //   const log = vi.fn()
-  //   const toggle = ref(true)
-
-  //   const Child = {
-  //     data() {
-  //       return {
-  //         count: 0,
-  //         text: 'hello',
-  //         style: {
-  //           color: 'red',
-  //         },
-  //       }
-  //     },
-  //     mounted() {
-  //       mounted.push('child')
-  //     },
-  //     template: `
-  //     <div>
-  //       <span class="count" :style="style">{{ count }}</span>
-  //       <button class="inc" @click="count++">inc</button>
-  //       <button class="change" @click="style.color = 'green'" >change color</button>
-  //       <button class="emit" @click="$emit('foo')">emit</button>
-  //       <span class="text">{{ text }}</span>
-  //       <input v-model="text">
-  //     </div>
-  //     `,
-  //   }
-
-  //   const App = {
-  //     setup() {
-  //       return { toggle }
-  //     },
-  //     mounted() {
-  //       mounted.push('parent')
-  //     },
-  //     template: `
-  //       <div>
-  //         <span>hello</span>
-  //         <template v-if="toggle">
-  //           <Child @foo="log('child')"/>
-  //           <template v-if="true">
-  //             <button class="parent-click" @click="log('click')">click me</button>
-  //           </template>
-  //         </template>
-  //         <span>hello</span>
-  //       </div>`,
-  //     components: {
-  //       Child,
-  //     },
-  //     methods: {
-  //       log,
-  //     },
-  //   }
-
-  //   const container = document.createElement('div')
-  //   // server render
-  //   container.innerHTML = await renderToString(h(App))
-  //   // hydrate
-  //   createSSRApp(App).mount(container)
-
-  //   // assert interactions
-  //   // 1. parent button click
-  //   triggerEvent('click', container.querySelector('.parent-click')!)
-  //   expect(log).toHaveBeenCalledWith('click')
-
-  //   // 2. child inc click + text interpolation
-  //   const count = container.querySelector('.count') as HTMLElement
-  //   expect(count.textContent).toBe(`0`)
-  //   triggerEvent('click', container.querySelector('.inc')!)
-  //   await nextTick()
-  //   expect(count.textContent).toBe(`1`)
-
-  //   // 3. child color click + style binding
-  //   expect(count.style.color).toBe('red')
-  //   triggerEvent('click', container.querySelector('.change')!)
-  //   await nextTick()
-  //   expect(count.style.color).toBe('green')
-
-  //   // 4. child event emit
-  //   triggerEvent('click', container.querySelector('.emit')!)
-  //   expect(log).toHaveBeenCalledWith('child')
-
-  //   // 5. child v-model
-  //   const text = container.querySelector('.text')!
-  //   const input = container.querySelector('input')!
-  //   expect(text.textContent).toBe('hello')
-  //   input.value = 'bye'
-  //   triggerEvent('input', input)
-  //   await nextTick()
-  //   expect(text.textContent).toBe('bye')
-  // })
-
-  // test('handle click error in ssr mode', async () => {
-  //   const App = {
-  //     setup() {
-  //       const throwError = () => {
-  //         throw new Error('Sentry Error')
-  //       }
-  //       return { throwError }
-  //     },
-  //     template: `
-  //       <div>
-  //         <button class="parent-click" @click="throwError">click me</button>
-  //       </div>`,
-  //   }
-
-  //   const container = document.createElement('div')
-  //   // server render
-  //   container.innerHTML = await renderToString(h(App))
-  //   // hydrate
-  //   const app = createSSRApp(App)
-  //   const handler = (app.config.errorHandler = vi.fn())
-  //   app.mount(container)
-  //   // assert interactions
-  //   // parent button click
-  //   triggerEvent('click', container.querySelector('.parent-click')!)
-  //   expect(handler).toHaveBeenCalled()
-  // })
-
-  // test('handle blur error in ssr mode', async () => {
-  //   const App = {
-  //     setup() {
-  //       const throwError = () => {
-  //         throw new Error('Sentry Error')
-  //       }
-  //       return { throwError }
-  //     },
-  //     template: `
-  //       <div>
-  //         <input class="parent-click" @blur="throwError"/>
-  //       </div>`,
-  //   }
-
-  //   const container = document.createElement('div')
-  //   // server render
-  //   container.innerHTML = await renderToString(h(App))
-  //   // hydrate
-  //   const app = createSSRApp(App)
-  //   const handler = (app.config.errorHandler = vi.fn())
-  //   app.mount(container)
-  //   // assert interactions
-  //   // parent blur event
-  //   triggerEvent('blur', container.querySelector('.parent-click')!)
-  //   expect(handler).toHaveBeenCalled()
-  // })
-
-  // test('async component', async () => {
-  //   const spy = vi.fn()
-  //   const Comp = () =>
-  //     h(
-  //       'button',
-  //       {
-  //         onClick: spy,
-  //       },
-  //       'hello!',
-  //     )
-
-  //   let serverResolve: any
-  //   let AsyncComp = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         serverResolve = r
-  //       }),
-  //   )
-
-  //   const App = {
-  //     render() {
-  //       return ['hello', h(AsyncComp), 'world']
-  //     },
-  //   }
-
-  //   // server render
-  //   const htmlPromise = renderToString(h(App))
-  //   serverResolve(Comp)
-  //   const html = await htmlPromise
-  //   expect(html).toMatchInlineSnapshot(
-  //     `"<!--[-->hello<button>hello!</button>world<!--]-->"`,
-  //   )
-
-  //   // hydration
-  //   let clientResolve: any
-  //   AsyncComp = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         clientResolve = r
-  //       }),
-  //   )
-
-  //   const container = document.createElement('div')
-  //   container.innerHTML = html
-  //   createSSRApp(App).mount(container)
-
-  //   // hydration not complete yet
-  //   triggerEvent('click', container.querySelector('button')!)
-  //   expect(spy).not.toHaveBeenCalled()
-
-  //   // resolve
-  //   clientResolve(Comp)
-  //   await new Promise(r => setTimeout(r))
-
-  //   // should be hydrated now
-  //   triggerEvent('click', container.querySelector('button')!)
-  //   expect(spy).toHaveBeenCalled()
-  // })
-
-  // test('update async wrapper before resolve', async () => {
-  //   const Comp = {
-  //     render() {
-  //       return h('h1', 'Async component')
-  //     },
-  //   }
-  //   let serverResolve: any
-  //   let AsyncComp = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         serverResolve = r
-  //       }),
-  //   )
-
-  //   const toggle = ref(true)
-  //   const App = {
-  //     setup() {
-  //       onMounted(() => {
-  //         // change state, this makes updateComponent(AsyncComp) execute before
-  //         // the async component is resolved
-  //         toggle.value = false
-  //       })
-
-  //       return () => {
-  //         return [toggle.value ? 'hello' : 'world', h(AsyncComp)]
-  //       }
-  //     },
-  //   }
-
-  //   // server render
-  //   const htmlPromise = renderToString(h(App))
-  //   serverResolve(Comp)
-  //   const html = await htmlPromise
-  //   expect(html).toMatchInlineSnapshot(
-  //     `"<!--[-->hello<h1>Async component</h1><!--]-->"`,
-  //   )
-
-  //   // hydration
-  //   let clientResolve: any
-  //   AsyncComp = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         clientResolve = r
-  //       }),
-  //   )
+        {
+          Child: `<template>{{ data }}</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>foo<span></span>foo<span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>bar<span></span>bar<span></span></div>"`,
+      )
+    })
+
+    test('fragment component with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+        <div>
+          <span/>
+          <components.Child/>
+          <span/>
+        </div>
+      </template>
+      `,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  //   const container = document.createElement('div')
-  //   container.innerHTML = html
-  //   createSSRApp(App).mount(container)
+    test('nested fragment component with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><components.Parent/></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  //   // resolve
-  //   clientResolve(Comp)
-  //   await new Promise(r => setTimeout(r))
+    test('nested fragment component with multi level anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><div><span/><components.Parent/><span/></div></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span><div><span></span>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <span></span></div><span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span><div><span></span>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <span></span></div><span></span></div>"
+      `,
+      )
+    })
+
+    test('consecutive fragment components with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <components.Child/>
+            <components.Child/>
+            <span/>
+          </div>
+        </template>
+      `,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo<!--]-->
+        <!--[--><div>foo</div>-foo<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar<!--]-->
+        <!--[--><div>bar</div>-bar<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  //   // should be hydrated now
-  //   expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  //   expect(container.innerHTML).toMatchInlineSnapshot(
-  //     `"<!--[-->world<h1>Async component</h1><!--]-->"`,
-  //   )
-  // })
+    test('nested consecutive fragment components with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><components.Parent/></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  // test('hydrate safely when property used by async setup changed before render', async () => {
-  //   const toggle = ref(true)
-
-  //   const AsyncComp = {
-  //     async setup() {
-  //       await new Promise<void>(r => setTimeout(r, 10))
-  //       return () => h('h1', 'Async component')
-  //     },
-  //   }
-
-  //   const AsyncWrapper = {
-  //     render() {
-  //       return h(AsyncComp)
-  //     },
-  //   }
-
-  //   const SiblingComp = {
-  //     setup() {
-  //       toggle.value = false
-  //       return () => h('span')
-  //     },
-  //   }
-
-  //   const App = {
-  //     setup() {
-  //       return () =>
-  //         h(
-  //           Suspense,
-  //           {},
-  //           {
-  //             default: () => [
-  //               h('main', {}, [
-  //                 h(AsyncWrapper, {
-  //                   prop: toggle.value ? 'hello' : 'world',
-  //                 }),
-  //                 h(SiblingComp),
-  //               ]),
-  //             ],
-  //           },
-  //         )
-  //     },
-  //   }
-
-  //   // server render
-  //   const html = await renderToString(h(App))
-
-  //   expect(html).toMatchInlineSnapshot(
-  //     `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
-  //   )
+    test('nested consecutive fragment components with multi level anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><div><span></span><components.Parent/><span></span></div></template>
+      `,
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span><div><span></span>
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <span></span></div><span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span><div><span></span>
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <span></span></div><span></span></div>"
+      `,
+      )
+    })
 
-  //   expect(toggle.value).toBe(false)
+    test('nested consecutive fragment components with root level anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `
+      <template><div><span></span><components.Parent/><span></span></div></template>
+      `,
+        {
+          Parent: `<template><components.Child/><components.Child/></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[-->
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <!--[--><div>foo</div>-foo-<!--]-->
+        <!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[-->
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <!--[--><div>bar</div>-bar-<!--]-->
+        <!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  //   // hydration
+    test('mixed fragment component and element with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+        <div>
+          <span/>
+          <components.Child/>
+          <span/>
+          <components.Child/>
+          <span/>
+        </div>
+      </template>
+      `,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo<!--]-->
+        <span></span>
+        <!--[--><div>foo</div>-foo<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar<!--]-->
+        <span></span>
+        <!--[--><div>bar</div>-bar<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
 
-  //   // reset the value
-  //   toggle.value = true
-  //   expect(toggle.value).toBe(true)
+    test('mixed fragment component and text with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+        <div>
+          <span/>
+          <components.Child/>
+          {{ data }}
+          <components.Child/>
+          <span/>
+        </div>
+      </template>
+      `,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>foo</div>-foo<!--]-->
+         foo 
+        <!--[--><div>foo</div>-foo<!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>bar</div>-bar<!--]-->
+         bar 
+        <!--[--><div>bar</div>-bar<!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
+  })
 
-  //   const container = document.createElement('div')
-  //   container.innerHTML = html
-  //   createSSRApp(App).mount(container)
+  describe('dynamic component', () => {
+    test('basic dynamic component', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <component :is="components[data]"/>
+        </template>`,
+        {
+          foo: `<template><div>foo</div></template>`,
+          bar: `<template><div>bar</div></template>`,
+        },
+        ref('foo'),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--dynamic-component-->"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>bar</div><!--dynamic-component-->"`,
+      )
+    })
+
+    test('dynamic component with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <component :is="components[data]"/>
+            <span/>
+          </div>
+        </template>`,
+        {
+          foo: `<template><div>foo</div></template>`,
+          bar: `<template><div>bar</div></template>`,
+        },
+        ref('foo'),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>foo</div><!--dynamic-component--><span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>bar</div><!--dynamic-component--><span></span></div>"`,
+      )
+    })
+
+    test('consecutive dynamic components with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <component :is="components[data]"/>
+            <component :is="components[data]"/>
+            <span/>
+          </div>
+        </template>`,
+        {
+          foo: `<template><div>foo</div></template>`,
+          bar: `<template><div>bar</div></template>`,
+        },
+        ref('foo'),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>foo</div><!--dynamic-component--><div>foo</div><!--dynamic-component--><span></span></div>"`,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><div>bar</div><!--dynamic-component--><div>bar</div><!--dynamic-component--><span></span></div>"`,
+      )
+    })
+
+    test('dynamic component fallback', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+            <component :is="'button'">
+              <span>{{ data }}</span>
+            </component>
+          </template>`,
+        {},
+        ref('foo'),
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<button><span>foo</span></button><!--dynamic-component-->"`,
+      )
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<button><span>bar</span></button><!--dynamic-component-->"`,
+      )
+    })
+
+    test('in ssr slot vnode fallback', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+            <components.Child>
+              <span>{{ data }}</span>
+            </components.Child>
+          </template>`,
+        {
+          Child: `
+          <template>
+            <component :is="'div'">
+              <slot />
+            </component>
+          </template>`,
+        },
+        ref('foo'),
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        </div><!--dynamic-component-->"
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>bar</span><!--]-->
+        </div><!--dynamic-component-->"
+      `,
+      )
+    })
+  })
 
-  //   await new Promise(r => setTimeout(r, 10))
+  describe('if', () => {
+    test('basic toggle - true -> false', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div v-if="data">foo</div>
+        </template>`,
+        undefined,
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if-->"`,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+    })
+
+    test('basic toggle - false -> true', async () => {
+      const data = ref(false)
+      const { container } = await testHydration(
+        `<template>
+          <div v-if="data">foo</div>
+        </template>`,
+        undefined,
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if-->"`,
+      )
+    })
+
+    test('v-if on insertion parent', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div v-if="data">
+            <components.Child/>
+          </div>
+        </template>`,
+        { Child: `<template>foo</template>` },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if-->"`,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if-->"`,
+      )
+    })
+
+    test('v-if/else-if/else chain - switch branches', async () => {
+      const data = ref('a')
+      const { container } = await testHydration(
+        `<template>
+          <div v-if="data === 'a'">foo</div>
+          <div v-else-if="data === 'b'">bar</div>
+          <div v-else>baz</div>
+        </template>`,
+        undefined,
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if-->"`,
+      )
+
+      data.value = 'b'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>bar</div><!--if--><!--if-->"`,
+      )
+
+      data.value = 'c'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>baz</div><!--if--><!--if-->"`,
+      )
+
+      data.value = 'a'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if-->"`,
+      )
+    })
+
+    test('nested if', async () => {
+      const data = reactive({ outer: true, inner: true })
+      const { container } = await testHydration(
+        `<template>
+          <div v-if="data.outer">
+            <span>outer</span>
+            <div v-if="data.inner">inner</div>
+          </div>
+        </template>`,
+        undefined,
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>outer</span><div>inner</div><!--if--></div><!--if-->"`,
+      )
+
+      data.inner = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>outer</span><!--if--></div><!--if-->"`,
+      )
+
+      data.outer = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+    })
+
+    test('on component', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <components.Child v-if="data"/>
+        </template>`,
+        { Child: `<template>foo</template>` },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"foo<!--if-->"`,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+    })
+
+    test('consecutive if node', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <components.Child v-if="data"/>
+        </template>`,
+        { Child: `<template><div v-if="data">foo</div></template>` },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if--><!--if-->"`,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div>foo</div><!--if--><!--if-->"`,
+      )
+    })
+
+    test('mixed prepend and insertion anchor', async () => {
+      const data = reactive({
+        show: true,
+        foo: 'foo',
+        bar: 'bar',
+        qux: 'qux',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child/>
+        </template>`,
+        {
+          Child: `<template>
+            <span v-if="data.show">
+              <span v-if="data.show">{{data.foo}}</span>
+              <span v-if="data.show">{{data.bar}}</span>
+              <span>baz</span>
+              <span v-if="data.show">{{data.qux}}</span>
+              <span>quux</span>
+            </span>
+          </template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span><span>foo</span><!--if--><span>bar</span><!--if--><span>baz</span><span>qux</span><!--if--><span>quux</span></span><!--if-->"`,
+      )
+
+      data.qux = 'qux1'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span><span>foo</span><!--if--><span>bar</span><!--if--><span>baz</span><span>qux1</span><!--if--><span>quux</span></span><!--if-->"`,
+      )
+
+      data.foo = 'foo1'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span><span>foo1</span><!--if--><span>bar</span><!--if--><span>baz</span><span>qux1</span><!--if--><span>quux</span></span><!--if-->"`,
+      )
+    })
+
+    test('v-if/else-if/else chain on component - switch branches', async () => {
+      const data = ref('a')
+      const { container } = await testHydration(
+        `<template>
+          <components.Child1 v-if="data === 'a'"/>
+          <components.Child2 v-else-if="data === 'b'"/>
+          <components.Child3 v-else/>
+        </template>`,
+        {
+          Child1: `<template><span>{{data}} child1</span></template>`,
+          Child2: `<template><span>{{data}} child2</span></template>`,
+          Child3: `<template><span>{{data}} child3</span></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span>a child1</span><!--if-->"`,
+      )
+
+      data.value = 'b'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span>b child2</span><!--if--><!--if-->"`,
+      )
+
+      data.value = 'c'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span>c child3</span><!--if--><!--if-->"`,
+      )
+
+      data.value = 'a'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<span>a child1</span><!--if-->"`,
+      )
+    })
+
+    test('on component with insertion anchor', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <components.Child v-if="data"/>
+            <span/>
+          </div>
+        </template>`,
+        { Child: `<template>foo</template>` },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>foo<!--if--><span></span></div>"`,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><!--if--><span></span></div>"`,
+      )
+    })
+
+    test('consecutive component with insertion parent', async () => {
+      const data = reactive({
+        show: true,
+        foo: 'foo',
+        bar: 'bar',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <div v-if="data.show">
+            <components.Child/>
+            <components.Child2/>
+          </div>
+        </template>`,
+        {
+          Child: `<template><span>{{data.foo}}</span></template>`,
+          Child2: `<template><span>{{data.bar}}</span></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo</span><span>bar</span></div><!--if-->"`,
+      )
+
+      data.show = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<!--if-->"`,
+      )
+
+      data.show = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo</span><span>bar</span></div><!--if-->"`,
+      )
+
+      data.foo = 'foo1'
+      data.bar = 'bar1'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span>foo1</span><span>bar1</span></div><!--if-->"`,
+      )
+    })
+
+    test('on fragment component', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <components.Child v-if="data"/>
+          </div>
+        </template>`,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        </div>"
+      `,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><!--if--><!--]-->
+        </div>"
+      `,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        </div>"
+      `,
+      )
+    })
+
+    test('on fragment component with insertion anchor', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <components.Child v-if="data"/>
+            <span/>
+          </div>
+        </template>`,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><!--if--><!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "<div><span></span>
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        <span></span></div>"
+      `)
+    })
+
+    test('consecutive v-if on fragment component with insertion anchor', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <components.Child v-if="data"/>
+            <components.Child v-if="data"/>
+            <span/>
+          </div>
+        </template>`,
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><!--if--><!--]-->
+        <!--[--><!--if--><!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "<div><span></span>
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        <!--[--><div>true</div>-true-<!--if--><!--]-->
+        <span></span></div>"
+      `)
+    })
+
+    test('on dynamic component with insertion anchor', async () => {
+      const data = ref(true)
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <component :is="components.Child" v-if="data"/>
+            <span/>
+          </div>
+        </template>`,
+        { Child: `<template>foo</template>` },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>foo<!--dynamic-component--><!--if--><span></span></div>"`,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span><!--if--><span></span></div>"`,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `"<div><span></span>foo<!--dynamic-component--><!--if--><span></span></div>"`,
+      )
+    })
+  })
 
-  //   expect(toggle.value).toBe(false)
+  describe('for', () => {
+    test('basic v-for', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <span v-for="item in data" :key="item">{{ item }}</span>
+        </template>`,
+        undefined,
+        ref(['a', 'b', 'c']),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for-->"
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for-->"
+      `,
+      )
+    })
+
+    test('v-for with insertion parent + sibling component', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <span v-for="item in data" :key="item">{{ item }}</span>
+          </div>
+          <components.Child/>
+        </template>`,
+        {
+          Child: `<template><div>{{data.length}}</div></template>`,
+        },
+        ref(['a', 'b', 'c']),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><div>
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for--></div><div>3</div><!--]-->
+        "
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><div>
+        <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for--></div><div>4</div><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('v-for with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <span v-for="item in data" :key="item">{{ item }}</span>
+            <span/>
+          </div>
+        </template>`,
+        undefined,
+        ref(['a', 'b', 'c']),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for--><span></span></div>"
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for--><span></span></div>"
+      `,
+      )
+
+      data.value.splice(0, 1)
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>b</span><span>c</span><span>d</span><!--for--><span></span></div>"
+      `,
+      )
+    })
+
+    test('consecutive v-for with insertion anchor', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <span/>
+            <span v-for="item in data" :key="item">{{ item }}</span>
+            <span v-for="item in data" :key="item">{{ item }}</span>
+            <span/>
+          </div>
+        </template>`,
+        undefined,
+        ref(['a', 'b', 'c']),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for-->
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for--><span></span></div>"
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for-->
+        <!--[--><span>a</span><span>b</span><span>c</span><span>d</span><!--for--><span></span></div>"
+      `,
+      )
+
+      data.value.splice(0, 2)
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>c</span><span>d</span><!--for-->
+        <!--[--><span>c</span><span>d</span><!--for--><span></span></div>"
+      `,
+      )
+    })
+
+    test('v-for on component', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <components.Child v-for="item in data" :key="item"/>
+          </div>
+        </template>`,
+        {
+          Child: `<template><div>comp</div></template>`,
+        },
+        ref(['a', 'b', 'c']),
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>comp</div><div>comp</div><div>comp</div><!--for--></div>"
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>comp</div><div>comp</div><div>comp</div><div>comp</div><!--for--></div>"
+      `,
+      )
+    })
+
+    test('v-for on component with slots', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <components.Child v-for="item in data" :key="item">
+              <span>{{ item }}</span>
+            </components.Child>
+          </div>
+        </template>`,
+        {
+          Child: `<template><slot/></template>`,
+        },
+        ref(['a', 'b', 'c']),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[-->
+        <!--[--><span>a</span><!--]-->
+        <!--[--><span>b</span><!--]-->
+        <!--[--><span>c</span><!--]-->
+        <!--for--></div>"
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[-->
+        <!--[--><span>a</span><!--]-->
+        <!--[--><span>b</span><!--]-->
+        <!--[--><span>c</span><!--]-->
+        <span>d</span><!--slot--><!--for--></div>"
+      `,
+      )
+    })
+
+    test('on fragment component', async () => {
+      const { container, data } = await testHydration(
+        `<template>
+          <div>
+            <components.Child v-for="item in data" :key="item"/>
+          </div>
+        </template>`,
+        {
+          Child: `<template><div>foo</div>-bar-</template>`,
+        },
+        ref(['a', 'b', 'c']),
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[-->
+        <!--[--><div>foo</div>-bar-<!--]-->
+        <!--[--><div>foo</div>-bar-<!--]-->
+        <!--[--><div>foo</div>-bar-<!--for--><!--]-->
+        </div>"
+      `,
+      )
+
+      data.value.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[-->
+        <!--[--><div>foo</div>-bar-<!--]-->
+        <!--[--><div>foo</div>-bar-<!--]-->
+        <!--[--><div>foo</div>-bar-<div>foo</div>-bar-<!--for--><!--]-->
+        </div>"
+      `,
+      )
+    })
+
+    test('on component with non-hydration node', async () => {
+      const data = ref({ show: true, msg: 'foo' })
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <components.Child v-for="item in 2" :key="item"/>
+          </div>
+        </template>`,
+        {
+          Child: `<template>
+            <div>
+              <div>
+                <div v-if="data.show">{{ data.msg }}</div>
+              </div>
+              <span>non-hydration node</span>
+            </div>
+          </template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><div><div><div>foo</div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `,
+      )
+
+      data.value.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `,
+      )
+
+      data.value.show = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "<div>
+        <!--[--><div><div><!--if--></div><span>non-hydration node</span></div><div><div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `)
+
+      data.value.show = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "<div>
+        <!--[--><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><div><div><div>bar</div><!--if--></div><span>non-hydration node</span></div><!--for--></div>"
+      `)
+    })
+  })
 
-  //   // should be hydrated now
-  //   expect(container.innerHTML).toMatchInlineSnapshot(
-  //     `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
-  //   )
-  // })
+  describe('slots', () => {
+    test('basic slot', async () => {
+      const { data, container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot/></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>foo</span><!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>bar</span><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('named slot', async () => {
+      const { data, container } = await testHydration(
+        `<template>
+          <components.Child>
+            <template #foo>
+              <span>{{data}}</span>
+            </template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot/><slot name="foo"/></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><!--]-->
+        <!--[--><span>foo</span><!--]-->
+        <!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><!--]-->
+        <!--[--><span>bar</span><!--]-->
+        <!--]-->
+        "
+      `,
+      )
+    })
+
+    test('named slot with v-if', async () => {
+      const { data, container } = await testHydration(
+        `<template>
+          <components.Child>
+            <template #foo v-if="data">
+              <span>{{data}}</span>
+            </template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot name="foo"/></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>foo</span><!--]-->
+        "
+      `,
+      )
+
+      data.value = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><!--]-->
+        "
+      `,
+      )
+
+      data.value = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "
+        <!--[--><span>true</span><!--]-->
+        "
+      `)
+    })
+
+    test('named slot with v-if and v-for', async () => {
+      const data = reactive({
+        show: true,
+        items: ['a', 'b', 'c'],
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <template #foo v-if="data.show">
+              <span v-for="item in data.items" :key="item">{{item}}</span>
+            </template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot name="foo"/></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for--><!--]-->
+        "
+      `,
+      )
+
+      data.show = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><!--]-->
+        "
+      `,
+      )
+
+      data.show = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><span>a</span><span>b</span><span>c</span><!--for--><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('with insertion anchor', async () => {
+      const { data, container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span/>
+            <span>{{data}}</span>
+            <span/>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot/></template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span></span><span>foo</span><span></span><!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span></span><span>bar</span><span></span><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('with multi level anchor insertion', async () => {
+      const { data, container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span/>
+            <span>{{data}}</span>
+            <span/>
+          </components.Child>
+        </template>`,
+        {
+          Child: `
+          <template>
+            <div/>
+              <div/>
+              <slot/>
+              <div/>
+            </div>
+          </template>`,
+        },
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><div></div><div></div>
+        <!--[--><span></span><span>foo</span><span></span><!--]-->
+        <div></div><!--]-->
+        "
+      `,
+      )
+
+      data.value = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><div></div><div></div>
+        <!--[--><span></span><span>bar</span><span></span><!--]-->
+        <div></div><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('mixed slot and text node', async () => {
+      const data = reactive({
+        text: 'foo',
+        msg: 'hi',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.text}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><div><slot/>{{data.msg}}</div></template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        hi</div>"
+      `,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        bar</div>"
+      `,
+      )
+    })
+
+    test('mixed root slot and text node', async () => {
+      const data = reactive({
+        text: 'foo',
+        msg: 'hi',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.text}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template>{{data.text}}<slot/>{{data.msg}}</template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->foo
+        <!--[--><span>foo</span><!--]-->
+        hi<!--]-->
+        "
+      `,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->foo
+        <!--[--><span>foo</span><!--]-->
+        bar<!--]-->
+        "
+      `,
+      )
+    })
+
+    test('mixed consecutive slot and element', async () => {
+      const data = reactive({
+        text: 'foo',
+        msg: 'hi',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <template #foo><span>{{data.text}}</span></template>
+            <template #bar><span>bar</span></template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><div><slot name="foo"/><slot name="bar"/><div>{{data.msg}}</div></div></template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><span>bar</span><!--]-->
+        <div>hi</div></div>"
+      `,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><span>bar</span><!--]-->
+        <div>bar</div></div>"
+      `,
+      )
+    })
+
+    test('mixed slot and element', async () => {
+      const data = reactive({
+        text: 'foo',
+        msg: 'hi',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.text}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><div><slot/><div>{{data.msg}}</div></div></template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        <div>hi</div></div>"
+      `,
+      )
+
+      data.msg = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        <div>bar</div></div>"
+      `,
+      )
+    })
+
+    test('mixed slot and component', async () => {
+      const data = reactive({
+        msg1: 'foo',
+        msg2: 'bar',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.msg1}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `
+          <template>
+            <div>
+              <components.Child2/>
+              <slot/>
+              <components.Child2/>
+            </div>
+          </template>`,
+          Child2: `
+          <template>
+            <div>{{data.msg2}}</div>
+          </template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><div>bar</div>
+        <!--[--><span>foo</span><!--]-->
+        <div>bar</div></div>"
+      `,
+      )
+
+      data.msg2 = 'hello'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><div>hello</div>
+        <!--[--><span>foo</span><!--]-->
+        <div>hello</div></div>"
+      `,
+      )
+    })
+
+    test('mixed slot and fragment component', async () => {
+      const data = reactive({
+        msg1: 'foo',
+        msg2: 'bar',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.msg1}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `
+          <template>
+            <div>
+              <components.Child2/>
+              <slot/>
+              <components.Child2/>
+            </div>
+          </template>`,
+          Child2: `
+          <template>
+            <div>{{data.msg1}}</div> {{data.msg2}}
+          </template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>foo</div> bar<!--]-->
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><div>foo</div> bar<!--]-->
+        </div>"
+      `,
+      )
+
+      data.msg1 = 'hello'
+      data.msg2 = 'vapor'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><div>hello</div> vapor<!--]-->
+        <!--[--><span>hello</span><!--]-->
+        <!--[--><div>hello</div> vapor<!--]-->
+        </div>"
+      `,
+      )
+    })
+
+    test('mixed slot and v-if', async () => {
+      const data = reactive({
+        show: true,
+        msg: 'foo',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.msg}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `
+          <template>
+            <div v-if="data.show">{{data.msg}}</div>
+            <slot/>
+            <div v-if="data.show">{{data.msg}}</div>
+          </template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><div>foo</div><!--if-->
+        <!--[--><span>foo</span><!--]-->
+        <div>foo</div><!--if--><!--]-->
+        "
+      `,
+      )
+
+      data.show = false
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><!--if-->
+        <!--[--><span>foo</span><!--]-->
+        <!--if--><!--]-->
+        "
+      `,
+      )
+
+      data.show = true
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`
+        "
+        <!--[--><div>foo</div><!--if-->
+        <!--[--><span>foo</span><!--]-->
+        <div>foo</div><!--if--><!--]-->
+        "
+      `)
+    })
+
+    test('mixed slot and v-for', async () => {
+      const data = reactive({
+        items: ['a', 'b', 'c'],
+        msg: 'foo',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.msg}}</span>
+          </components.Child>
+        </template>`,
+        {
+          Child: `
+          <template>
+            <div v-for="item in data.items" :key="item">{{item}}</div>
+            <slot/>
+            <div v-for="item in data.items" :key="item">{{item}}</div>
+          </template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><div>a</div><div>b</div><div>c</div><!--for-->
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><div>a</div><div>b</div><div>c</div><!--for--><!--]-->
+        "
+      `,
+      )
+
+      data.items.push('d')
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--for-->
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><div>a</div><div>b</div><div>c</div><div>d</div><!--for--><!--]-->
+        "
+      `,
+      )
+    })
+
+    test('consecutive slots', async () => {
+      const data = reactive({
+        msg1: 'foo',
+        msg2: 'bar',
+      })
+
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.msg1}}</span>
+            <template #bar>
+              <span>{{data.msg2}}</span>
+            </template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot/><slot name="bar"/></template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><span>bar</span><!--]-->
+        <!--]-->
+        "
+      `,
+      )
+
+      data.msg1 = 'hello'
+      data.msg2 = 'vapor'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[-->
+        <!--[--><span>hello</span><!--]-->
+        <!--[--><span>vapor</span><!--]-->
+        <!--]-->
+        "
+      `,
+      )
+    })
+
+    test('consecutive slots with insertion anchor', async () => {
+      const data = reactive({
+        msg1: 'foo',
+        msg2: 'bar',
+      })
+
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <span>{{data.msg1}}</span>
+            <template #bar>
+              <span>{{data.msg2}}</span>
+            </template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template>
+            <div>
+              <span/>
+              <slot/>
+              <slot name="bar"/>
+              <span/>
+            </div>
+          </template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><span>bar</span><!--]-->
+        <span></span></div>"
+      `,
+      )
+
+      data.msg1 = 'hello'
+      data.msg2 = 'vapor'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><span></span>
+        <!--[--><span>hello</span><!--]-->
+        <!--[--><span>vapor</span><!--]-->
+        <span></span></div>"
+      `,
+      )
+    })
+
+    test('consecutive slots prepend', async () => {
+      const data = reactive({
+        msg1: 'foo',
+        msg2: 'bar',
+        msg3: 'baz',
+      })
+
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+            <template #foo>
+              <span>{{data.msg1}}</span>
+            </template>
+            <template #bar>
+              <span>{{data.msg2}}</span>
+            </template>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template>
+            <div>
+              <slot name="foo"/>
+              <slot name="bar"/>
+              <div>{{data.msg3}}</div>
+            </div>
+          </template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>foo</span><!--]-->
+        <!--[--><span>bar</span><!--]-->
+        <div>baz</div></div>"
+      `,
+      )
+
+      data.msg1 = 'hello'
+      data.msg2 = 'vapor'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><span>hello</span><!--]-->
+        <!--[--><span>vapor</span><!--]-->
+        <div>baz</div></div>"
+      `,
+      )
+    })
+
+    test('slot fallback', async () => {
+      const data = reactive({
+        foo: 'foo',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Child>
+          </components.Child>
+        </template>`,
+        {
+          Child: `<template><slot><span>{{data.foo}}</span></slot></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>foo</span><!--]-->
+        "
+      `,
+      )
+
+      data.foo = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "
+        <!--[--><span>bar</span><!--]-->
+        "
+      `,
+      )
+    })
+
+    // required https://github.com/vuejs/core/pull/13408 get merged
+    test.todo('forwarded slot', async () => {
+      const data = reactive({
+        foo: 'foo',
+        bar: 'bar',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <div>
+            <components.Parent>
+              <span>{{data.foo}}</span>
+            </components.Parent>
+            <div>{{data.bar}}</div>
+          </div>
+        </template>`,
+        {
+          Parent: `<template><div><components.Child><slot/></components.Child></div></template>`,
+          Child: `<template><div><slot/></div></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><div><div>
+        <!--[-->
+        <!--[--><span>foo</span><!--]-->
+        <!--]-->
+        </div></div><div>bar</div></div>"
+      `,
+      )
+
+      data.foo = 'foo1'
+      data.bar = 'bar1'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div><div><div>
+        <!--[-->
+        <!--[--><span>foo1</span><!--]-->
+        <!--]-->
+        </div></div><div>bar1</div></div>"
+      `,
+      )
+    })
+
+    // required https://github.com/vuejs/core/pull/13408 get merged
+    test.todo('forwarded slot with fallback', async () => {
+      const data = reactive({
+        foo: 'foo',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Parent/>
+        </template>`,
+        {
+          Parent: `<template><components.Child><slot/></components.Child></template>`,
+          Child: `<template><div><slot>{{data.foo}}</slot></div></template>`,
+        },
+        data,
+      )
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[-->foo<!--]-->
+        </div>"
+      `,
+      )
+
+      data.foo = 'foo1'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[-->foo1<!--]-->
+        </div>"
+      `,
+      )
+    })
+
+    // required https://github.com/vuejs/core/pull/13408 get merged
+    test.todo('forwarded slot with empty content', async () => {
+      const data = reactive({
+        foo: 'foo',
+      })
+      const { container } = await testHydration(
+        `<template>
+          <components.Foo/>
+        </template>`,
+        {
+          Foo: `<template>
+                  <components.Bar>
+                    <template #foo>
+                      <slot name="foo" />
+                    </template>
+                  </components.Bar>
+                </template>`,
+          Bar: `<template>
+                  <components.Baz>
+                    <template #foo>
+                      <slot name="foo" />
+                    </template>
+                  </components.Baz>
+                </template>`,
+          Baz: `<template>
+                  <components.Qux>
+                    <template #foo>
+                      <slot name="foo" />
+                    </template>
+                  </components.Qux>
+                </template>`,
+          Qux: `<template>
+                  <div>
+                    <slot name="foo" />
+                    <div>{{data.foo}}</div>
+                  </div>
+                </template>`,
+        },
+        data,
+      )
+
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><!--]-->
+        <div>foo</div></div>"
+      `,
+      )
+
+      data.foo = 'bar'
+      await nextTick()
+      expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+        `
+        "<div>
+        <!--[--><!--]-->
+        <div>bar</div></div>"
+      `,
+      )
+    })
+  })
 
-  // test('hydrate safely when property used by deep nested async setup changed before render', async () => {
-  //   const toggle = ref(true)
-
-  //   const AsyncComp = {
-  //     async setup() {
-  //       await new Promise<void>(r => setTimeout(r, 10))
-  //       return () => h('h1', 'Async component')
-  //     },
-  //   }
-
-  //   const AsyncWrapper = { render: () => h(AsyncComp) }
-  //   const AsyncWrapperWrapper = { render: () => h(AsyncWrapper) }
-
-  //   const SiblingComp = {
-  //     setup() {
-  //       toggle.value = false
-  //       return () => h('span')
-  //     },
-  //   }
-
-  //   const App = {
-  //     setup() {
-  //       return () =>
-  //         h(
-  //           Suspense,
-  //           {},
-  //           {
-  //             default: () => [
-  //               h('main', {}, [
-  //                 h(AsyncWrapperWrapper, {
-  //                   prop: toggle.value ? 'hello' : 'world',
-  //                 }),
-  //                 h(SiblingComp),
-  //               ]),
-  //             ],
-  //           },
-  //         )
-  //     },
-  //   }
-
-  //   // server render
-  //   const html = await renderToString(h(App))
-
-  //   expect(html).toMatchInlineSnapshot(
-  //     `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
-  //   )
+  describe.todo('transition', async () => {
+    test('transition appear', async () => {})
 
-  //   expect(toggle.value).toBe(false)
+    test('transition appear with v-if', async () => {})
 
-  //   // hydration
+    test('transition appear with v-show', async () => {})
 
-  //   // reset the value
-  //   toggle.value = true
-  //   expect(toggle.value).toBe(true)
+    test('transition appear w/ event listener', async () => {})
+  })
 
-  //   const container = document.createElement('div')
-  //   container.innerHTML = html
-  //   createSSRApp(App).mount(container)
+  describe.todo('async component', async () => {
+    test('async component', async () => {})
 
-  //   await new Promise(r => setTimeout(r, 10))
+    test('update async wrapper before resolve', async () => {})
 
-  //   expect(toggle.value).toBe(false)
+    test('hydrate safely when property used by async setup changed before render', async () => {})
 
-  //   // should be hydrated now
-  //   expect(container.innerHTML).toMatchInlineSnapshot(
-  //     `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
-  //   )
-  // })
+    test('unmount async wrapper before load', async () => {})
 
-  // // #3787
-  // test('unmount async wrapper before load', async () => {
-  //   let resolve: any
-  //   const AsyncComp = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         resolve = r
-  //       }),
-  //   )
+    test('nested async wrapper', async () => {})
 
-  //   const show = ref(true)
-  //   const root = document.createElement('div')
-  //   root.innerHTML = '<div><div>async</div></div>'
+    test('unmount async wrapper before load (fragment)', async () => {})
+  })
 
-  //   createSSRApp({
-  //     render() {
-  //       return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
-  //     },
-  //   }).mount(root)
+  describe.todo('force hydrate prop', async () => {
+    test.todo('force hydrate prop with `.prop` modifier', () => {})
 
-  //   show.value = false
-  //   await nextTick()
-  //   expect(root.innerHTML).toBe('<div><div>hi</div></div>')
-  //   resolve({})
-  // })
+    test.todo(
+      'force hydrate input v-model with non-string value bindings',
+      () => {},
+    )
 
-  // //#12362
-  // test('nested async wrapper', async () => {
-  //   const Toggle = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         r(
-  //           defineComponent({
-  //             setup(_, { slots }) {
-  //               const show = ref(false)
-  //               onMounted(() => {
-  //                 nextTick(() => {
-  //                   show.value = true
-  //                 })
-  //               })
-  //               return () =>
-  //                 withDirectives(
-  //                   h('div', null, [renderSlot(slots, 'default')]),
-  //                   [[vShow, show.value]],
-  //                 )
-  //             },
-  //           }) as any,
-  //         )
-  //       }),
-  //   )
+    test.todo('force hydrate checkbox with indeterminate', () => {})
 
-  //   const Wrapper = defineAsyncComponent(() => {
-  //     return new Promise(r => {
-  //       r(
-  //         defineComponent({
-  //           render(this: any) {
-  //             return renderSlot(this.$slots, 'default')
-  //           },
-  //         }) as any,
-  //       )
-  //     })
-  //   })
-
-  //   const count = ref(0)
-  //   const fn = vi.fn()
-  //   const Child = {
-  //     setup() {
-  //       onMounted(() => {
-  //         fn()
-  //         count.value++
-  //       })
-  //       return () => h('div', count.value)
-  //     },
-  //   }
-
-  //   const App = {
-  //     render() {
-  //       return h(Toggle, null, {
-  //         default: () =>
-  //           h(Wrapper, null, {
-  //             default: () =>
-  //               h(Wrapper, null, {
-  //                 default: () => h(Child),
-  //               }),
-  //           }),
-  //       })
-  //     },
-  //   }
-
-  //   const root = document.createElement('div')
-  //   root.innerHTML = await renderToString(h(App))
-  //   expect(root.innerHTML).toMatchInlineSnapshot(
-  //     `"<div style="display:none;"><!--[--><!--[--><!--[--><div>0</div><!--]--><!--]--><!--]--></div>"`,
-  //   )
+    test.todo(
+      'force hydrate select option with non-string value bindings',
+      () => {},
+    )
 
-  //   createSSRApp(App).mount(root)
-  //   await nextTick()
-  //   await nextTick()
-  //   expect(root.innerHTML).toMatchInlineSnapshot(
-  //     `"<div style=""><!--[--><!--[--><!--[--><div>1</div><!--]--><!--]--><!--]--></div>"`,
-  //   )
-  //   expect(fn).toBeCalledTimes(1)
-  // })
+    test.todo('force hydrate custom element with dynamic props', () => {})
+  })
 
-  // test('unmount async wrapper before load (fragment)', async () => {
-  //   let resolve: any
-  //   const AsyncComp = defineAsyncComponent(
-  //     () =>
-  //       new Promise(r => {
-  //         resolve = r
-  //       }),
-  //   )
+  describe.todo('Teleport')
 
-  //   const show = ref(true)
-  //   const root = document.createElement('div')
-  //   root.innerHTML = '<div><!--[-->async<!--]--></div>'
+  describe.todo('Suspense')
+})
 
-  //   createSSRApp({
-  //     render() {
-  //       return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
-  //     },
-  //   }).mount(root)
+describe('mismatch handling', () => {
+  test('text node', async () => {
+    const foo = ref('bar')
+    const { container } = await mountWithHydration(`foo`, `{{data}}`, foo)
+    expect(container.textContent).toBe('bar')
+    expect(`Hydration text mismatch`).toHaveBeenWarned()
+  })
 
-  //   show.value = false
-  //   await nextTick()
-  //   expect(root.innerHTML).toBe('<div><div>hi</div></div>')
-  //   resolve({})
-  // })
+  test('element text content', async () => {
+    const data = ref({ textContent: 'bar' })
+    const { container } = await mountWithHydration(
+      `<div>foo</div>`,
+      `<div v-bind="data"></div>`,
+      data,
+    )
+    expect(container.innerHTML).toBe('<div>bar</div>')
+    expect(`Hydration text content mismatch`).toHaveBeenWarned()
+  })
 
-  // test('elements with camel-case in svg ', () => {
-  //   const { vnode, container } = mountWithHydration(
-  //     '<animateTransform></animateTransform>',
-  //     () => h('animateTransform'),
+  // test('not enough children', () => {
+  //   const { container } = mountWithHydration(`<div></div>`, () =>
+  //     h('div', [h('span', 'foo'), h('span', 'bar')]),
   //   )
-  //   expect(vnode.el).toBe(container.firstChild)
-  //   expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  // })
-
-  // test('SVG as a mount container', () => {
-  //   const svgContainer = document.createElement('svg')
-  //   svgContainer.innerHTML = '<g></g>'
-  //   const app = createSSRApp({
-  //     render: () => h('g'),
-  //   })
-
-  //   expect(
-  //     (
-  //       app.mount(svgContainer).$.subTree as VNode<Node, Element> & {
-  //         el: Element
-  //       }
-  //     ).el instanceof SVGElement,
+  //   expect(container.innerHTML).toBe(
+  //     '<div><span>foo</span><span>bar</span></div>',
   //   )
+  //   expect(`Hydration children mismatch`).toHaveBeenWarned()
   // })
-
-  // test('force hydrate prop with `.prop` modifier', () => {
-  //   const { container } = mountWithHydration('<input type="checkbox">', () =>
-  //     h('input', {
-  //       type: 'checkbox',
-  //       '.indeterminate': true,
-  //     }),
+  // test('too many children', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div><span>foo</span><span>bar</span></div>`,
+  //     () => h('div', [h('span', 'foo')]),
   //   )
-  //   expect((container.firstChild! as any).indeterminate).toBe(true)
+  //   expect(container.innerHTML).toBe('<div><span>foo</span></div>')
+  //   expect(`Hydration children mismatch`).toHaveBeenWarned()
   // })
-
-  // test('force hydrate input v-model with non-string value bindings', () => {
+  test('complete mismatch', async () => {
+    const data = ref('span')
+    const { container } = await mountWithHydration(
+      `<div>foo</div>`,
+      `<component :is="data">foo</component>`,
+      data,
+    )
+    expect(container.innerHTML).toBe('<span>foo</span><!--dynamic-component-->')
+    expect(`Hydration node mismatch`).toHaveBeenWarned()
+  })
+  // test('fragment mismatch removal', () => {
   //   const { container } = mountWithHydration(
-  //     '<input type="checkbox" value="true">',
-  //     () =>
-  //       withDirectives(
-  //         createVNode(
-  //           'input',
-  //           { type: 'checkbox', 'true-value': true },
-  //           null,
-  //           PatchFlags.PROPS,
-  //           ['true-value'],
-  //         ),
-  //         [[vModelCheckbox, true]],
-  //       ),
+  //     `<div><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
+  //     () => h('div', [h('span', 'replaced')]),
   //   )
-  //   expect((container.firstChild as any)._trueValue).toBe(true)
+  //   expect(container.innerHTML).toBe('<div><span>replaced</span></div>')
+  //   expect(`Hydration node mismatch`).toHaveBeenWarned()
   // })
-
-  // test('force hydrate checkbox with indeterminate', () => {
+  // test('fragment not enough children', () => {
   //   const { container } = mountWithHydration(
-  //     '<input type="checkbox" indeterminate>',
-  //     () =>
-  //       createVNode(
-  //         'input',
-  //         { type: 'checkbox', indeterminate: '' },
-  //         null,
-  //         PatchFlags.CACHED,
-  //       ),
+  //     `<div><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
+  //     () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
   //   )
-  //   expect((container.firstChild as any).indeterminate).toBe(true)
+  //   expect(container.innerHTML).toBe(
+  //     '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
+  //   )
+  //   expect(`Hydration node mismatch`).toHaveBeenWarned()
   // })
-
-  // test('force hydrate select option with non-string value bindings', () => {
+  // test('fragment too many children', () => {
   //   const { container } = mountWithHydration(
-  //     '<select><option value="true">ok</option></select>',
-  //     () =>
-  //       h('select', [
-  //         // hoisted because bound value is a constant...
-  //         createVNode('option', { value: true }, null, -1 /* HOISTED */),
-  //       ]),
+  //     `<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
+  //     () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
+  //   )
+  //   expect(container.innerHTML).toBe(
+  //     '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>',
   //   )
-  //   expect((container.firstChild!.firstChild as any)._value).toBe(true)
+  //   // fragment ends early and attempts to hydrate the extra <div>bar</div>
+  //   // as 2nd fragment child.
+  //   expect(`Hydration text content mismatch`).toHaveBeenWarned()
+  //   // excessive children removal
+  //   expect(`Hydration children mismatch`).toHaveBeenWarned()
   // })
-
-  // // #7203
-  // test('force hydrate custom element with dynamic props', () => {
-  //   class MyElement extends HTMLElement {
-  //     foo = ''
-  //     constructor() {
-  //       super()
-  //     }
-  //   }
-  //   customElements.define('my-element-7203', MyElement)
-
-  //   const msg = ref('bar')
-  //   const container = document.createElement('div')
-  //   container.innerHTML = '<my-element-7203></my-element-7203>'
-  //   const app = createSSRApp({
-  //     render: () => h('my-element-7203', { foo: msg.value }),
-  //   })
-  //   app.mount(container)
-  //   expect((container.firstChild as any).foo).toBe(msg.value)
+  // test('Teleport target has empty children', () => {
+  //   const teleportContainer = document.createElement('div')
+  //   teleportContainer.id = 'teleport'
+  //   document.body.appendChild(teleportContainer)
+  //   mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
+  //     h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
+  //   )
+  //   expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
+  //   expect(`Hydration children mismatch`).toHaveBeenWarned()
   // })
-
-  // // #5728
-  // test('empty text node in slot', () => {
-  //   const Comp = {
-  //     render(this: any) {
-  //       return renderSlot(this.$slots, 'default', {}, () => [
-  //         createTextVNode(''),
-  //       ])
-  //     },
-  //   }
-  //   const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () =>
-  //     h(Comp),
+  // test('comment mismatch (element)', () => {
+  //   const { container } = mountWithHydration(`<div><span></span></div>`, () =>
+  //     h('div', [createCommentVNode('hi')]),
   //   )
-  //   expect(container.childNodes.length).toBe(3)
-  //   const text = container.childNodes[1]
-  //   expect(text.nodeType).toBe(3)
-  //   expect(vnode.el).toBe(container.childNodes[0])
-  //   // component => slot fragment => text node
-  //   expect((vnode as any).component?.subTree.children[0].el).toBe(text)
+  //   expect(container.innerHTML).toBe('<div><!--hi--></div>')
+  //   expect(`Hydration node mismatch`).toHaveBeenWarned()
   // })
-
-  // // #7215
-  // test('empty text node', () => {
-  //   const Comp = {
-  //     render(this: any) {
-  //       return h('p', [''])
-  //     },
-  //   }
-  //   const { container } = mountWithHydration('<p></p>', () => h(Comp))
-  //   expect(container.childNodes.length).toBe(1)
-  //   const p = container.childNodes[0]
-  //   expect(p.childNodes.length).toBe(1)
-  //   const text = p.childNodes[0]
-  //   expect(text.nodeType).toBe(3)
+  // test('comment mismatch (text)', () => {
+  //   const { container } = mountWithHydration(`<div>foobar</div>`, () =>
+  //     h('div', [createCommentVNode('hi')]),
+  //   )
+  //   expect(container.innerHTML).toBe('<div><!--hi--></div>')
+  //   expect(`Hydration node mismatch`).toHaveBeenWarned()
   // })
+  test('class mismatch', async () => {
+    await mountWithHydration(
+      `<div class="foo bar"></div>`,
+      `<div :class="data"></div>`,
+      ref(['foo', 'bar']),
+    )
 
-  // // #11372
-  // test('object style value tracking in prod', async () => {
-  //   __DEV__ = false
-  //   try {
-  //     const style = reactive({ color: 'red' })
-  //     const Comp = {
-  //       render(this: any) {
-  //         return (
-  //           openBlock(),
-  //           createElementBlock(
-  //             'div',
-  //             {
-  //               style: normalizeStyle(style),
-  //             },
-  //             null,
-  //             4 /* STYLE */,
-  //           )
-  //         )
-  //       },
-  //     }
-  //     const { container } = mountWithHydration(
-  //       `<div style="color: red;"></div>`,
-  //       () => h(Comp),
-  //     )
-  //     style.color = 'green'
-  //     await nextTick()
-  //     expect(container.innerHTML).toBe(`<div style="color: green;"></div>`)
-  //   } finally {
-  //     __DEV__ = true
-  //   }
-  // })
+    await mountWithHydration(
+      `<div class="foo bar"></div>`,
+      `<div :class="data"></div>`,
+      ref({ foo: true, bar: true }),
+    )
 
-  // test('app.unmount()', async () => {
-  //   const container = document.createElement('DIV')
-  //   container.innerHTML = '<button></button>'
-  //   const App = defineComponent({
-  //     setup(_, { expose }) {
-  //       const count = ref(0)
-
-  //       expose({ count })
-
-  //       return () =>
-  //         h('button', {
-  //           onClick: () => count.value++,
-  //         })
-  //     },
-  //   })
-
-  //   const app = createSSRApp(App)
-  //   const vm = app.mount(container)
-  //   await nextTick()
-  //   expect((container as any)._vnode).toBeDefined()
-  //   // @ts-expect-error - expose()'d properties are not available on vm type
-  //   expect(vm.count).toBe(0)
-
-  //   app.unmount()
-  //   expect((container as any)._vnode).toBe(null)
-  // })
+    await mountWithHydration(
+      `<div class="foo bar"></div>`,
+      `<div :class="data"></div>`,
+      ref('foo bar'),
+    )
+
+    // svg classes
+    await mountWithHydration(
+      `<svg class="foo bar"></svg>`,
+      `<svg :class="data"></svg>`,
+      ref('foo bar'),
+    )
+
+    // class with different order
+    await mountWithHydration(
+      `<div class="foo bar"></div>`,
+      `<div :class="data"></div>`,
+      ref('bar foo'),
+    )
+    expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+
+    // single root mismatch
+    const { container: root } = await mountWithHydration(
+      `<div class="foo bar"></div>`,
+      `<div :class="data"></div>`,
+      ref('baz'),
+    )
+    expect(root.innerHTML).toBe('<div class="foo bar baz"></div>')
+    expect(`Hydration class mismatch`).toHaveBeenWarned()
+
+    // multiple root mismatch
+    const { container } = await mountWithHydration(
+      `<div class="foo bar"></div><span/>`,
+      `<div :class="data"></div><span/>`,
+      ref('foo'),
+    )
+    expect(container.innerHTML).toBe('<div class="foo"></div><span></span>')
+    expect(`Hydration class mismatch`).toHaveBeenWarned()
+  })
+
+  test('style mismatch', async () => {
+    await mountWithHydration(
+      `<div style="color:red;"></div>`,
+      `<div :style="data"></div>`,
+      ref({ color: 'red' }),
+    )
+
+    await mountWithHydration(
+      `<div style="color:red;"></div>`,
+      `<div :style="data"></div>`,
+      ref('color:red;'),
+    )
+
+    // style with different order
+    await mountWithHydration(
+      `<div style="color:red; font-size: 12px;"></div>`,
+      `<div :style="data"></div>`,
+      ref(`font-size: 12px; color:red;`),
+    )
+
+    expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+
+    // single root mismatch
+    const { container: root } = await mountWithHydration(
+      `<div style="color:red;"></div>`,
+      `<div :style="data"></div>`,
+      ref({ color: 'green' }),
+    )
+    expect(root.innerHTML).toBe('<div style="color: green;"></div>')
+    expect(`Hydration style mismatch`).toHaveBeenWarned()
+
+    // multiple root mismatch
+    const { container } = await mountWithHydration(
+      `<div style="color:red;"></div><span/>`,
+      `<div :style="data"></div><span/>`,
+      ref({ color: 'green' }),
+    )
+    expect(container.innerHTML).toBe(
+      '<div style="color: green;"></div><span></span>',
+    )
+    expect(`Hydration style mismatch`).toHaveBeenWarned()
+  })
+
+  test('style mismatch when no style attribute is present', async () => {
+    await mountWithHydration(
+      `<div></div>`,
+      `<div :style="data"></div>`,
+      ref({ color: 'red' }),
+    )
+    expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+  })
+
+  test('style mismatch w/ v-show', async () => {
+    await mountWithHydration(
+      `<div style="color:red;display:none"></div>`,
+      `<div v-show="data" style="color: red;"></div>`,
+      ref(false),
+    )
+    expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+
+    // mismatch with single root
+    const { container: root } = await mountWithHydration(
+      `<div style="color:red;"></div>`,
+      `<div v-show="data" style="color: red;"></div>`,
+      ref(false),
+    )
+    expect(root.innerHTML).toBe(
+      '<div style="color: red; display: none;"></div>',
+    )
+    expect(`Hydration style mismatch`).toHaveBeenWarned()
+
+    // mismatch with multiple root
+    const { container } = await mountWithHydration(
+      `<div style="color:red;"></div><span/>`,
+      `<div v-show="data.show" :style="data.style"></div><span/>`,
+      ref({ show: false, style: 'color: red' }),
+    )
+    expect(container.innerHTML).toBe(
+      '<div style="color: red; display: none;"></div><span></span>',
+    )
+    expect(`Hydration style mismatch`).toHaveBeenWarned()
+  })
+
+  test('attr mismatch', async () => {
+    await mountWithHydration(
+      `<div id="foo"></div>`,
+      `<div :id="data"></div>`,
+      ref('foo'),
+    )
+
+    await mountWithHydration(
+      `<div spellcheck></div>`,
+      `<div :spellcheck="data"></div>`,
+      ref(''),
+    )
+
+    await mountWithHydration(
+      `<div></div>`,
+      `<div :id="data"></div>`,
+      ref(undefined),
+    )
+
+    // boolean
+    await mountWithHydration(
+      `<select multiple></div>`,
+      `<select :multiple="data"></select>`,
+      ref(true),
+    )
+
+    await mountWithHydration(
+      `<select multiple></div>`,
+      `<select :multiple="data"></select>`,
+      ref('multiple'),
+    )
+
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    await mountWithHydration(
+      `<div></div>`,
+      `<div :id="data"></div>`,
+      ref('foo'),
+    )
+    expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(1)
+
+    await mountWithHydration(
+      `<div id="bar"></div>`,
+      `<div :id="data"></div>`,
+      ref('foo'),
+    )
+    expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+  })
+
+  test('attr special case: textarea value', async () => {
+    await mountWithHydration(
+      `<textarea>foo</textarea>`,
+      `<textarea :value="data"></textarea>`,
+      ref('foo'),
+    )
+
+    await mountWithHydration(
+      `<textarea></textarea>`,
+      `<textarea :value="data"></textarea>`,
+      ref(''),
+    )
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+    await mountWithHydration(
+      `<textarea>foo</textarea>`,
+      `<textarea :value="data"></textarea>`,
+      ref('bar'),
+    )
+    expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+  })
+
+  test('<textarea> with newlines at the beginning', async () => {
+    await mountWithHydration(
+      `<textarea>\nhello</textarea>`,
+      `<textarea :value="data"></textarea>`,
+      ref('\nhello'),
+    )
+
+    await mountWithHydration(
+      `<textarea>\nhello</textarea>`,
+      `<textarea v-text="data"></textarea>`,
+      ref('\nhello'),
+    )
+
+    await mountWithHydration(
+      `<textarea>\nhello</textarea>`,
+      `<textarea v-bind="data"></textarea>`,
+      ref({ textContent: '\nhello' }),
+    )
+    expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('<pre> with newlines at the beginning', async () => {
+    await mountWithHydration(`<pre>\n</pre>`, `<pre>{{data}}</pre>`, ref('\n'))
+
+    await mountWithHydration(
+      `<pre>\n</pre>`,
+      `<pre v-text="data"></pre>`,
+      ref('\n'),
+    )
+
+    await mountWithHydration(
+      `<pre>\n</pre>`,
+      `<pre v-bind="data"></pre>`,
+      ref({ textContent: '\n' }),
+    )
+    expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('boolean attr handling', async () => {
+    await mountWithHydration(
+      `<input />`,
+      `<input :readonly="data" />`,
+      ref(false),
+    )
+
+    await mountWithHydration(
+      `<input readonly />`,
+      `<input :readonly="data" />`,
+      ref(true),
+    )
+
+    await mountWithHydration(
+      `<input readonly="readonly" />`,
+      `<input :readonly="data" />`,
+      ref(true),
+    )
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('client value is null or undefined', async () => {
+    await mountWithHydration(
+      `<div></div>`,
+      `<div :draggable="data"></div>`,
+      ref(undefined),
+    )
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    await mountWithHydration(`<input />`, `<input :type="data" />`, ref(null))
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('should not warn against object values', async () => {
+    await mountWithHydration(`<input />`, `<input :from="data" />`, ref({}))
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('should not warn on falsy bindings of non-property keys', async () => {
+    await mountWithHydration(
+      `<button></button>`,
+      `<button :href="data"></button>`,
+      ref(undefined),
+    )
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('should not warn on non-renderable option values', async () => {
+    await mountWithHydration(
+      `<select><option>hello</option></select>`,
+      `<select><option :value="data">hello</option></select>`,
+      ref(['foo']),
+    )
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+  })
+
+  test.todo('should not warn css v-bind', () => {
+    // const container = document.createElement('div')
+    // container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
+    // const app = createSSRApp({
+    //   setup() {
+    //     useCssVars(() => ({
+    //       foo: 'red',
+    //     }))
+    //     return () => h('div', { style: { color: 'var(--foo)' } })
+    //   },
+    // })
+    // app.mount(container)
+    // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+  })
+
+  test.todo(
+    'css vars should only be added to expected on component root dom',
+    () => {
+      // const container = document.createElement('div')
+      // container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
+      // const app = createSSRApp({
+      //   setup() {
+      //     useCssVars(() => ({
+      //       foo: 'red',
+      //     }))
+      //     return () =>
+      //       h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
+      //   },
+      // })
+      // app.mount(container)
+      // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    },
+  )
 
-  // // #6637
-  // test('stringified root fragment', () => {
-  //   mountWithHydration(`<!--[--><div></div><!--]-->`, () =>
-  //     createStaticVNode(`<div></div>`, 1),
+  test.todo('css vars support fallthrough', () => {
+    // const container = document.createElement('div')
+    // container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
+    // const app = createSSRApp({
+    //   setup() {
+    //     useCssVars(() => ({
+    //       foo: 'red',
+    //     }))
+    //     return () => h(Child)
+    //   },
+    // })
+    // const Child = {
+    //   setup() {
+    //     return () => h('div', { style: 'padding: 4px' })
+    //   },
+    // }
+    // app.mount(container)
+    // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+  })
+
+  // vapor directive does not have a created hook
+  test('should not warn for directives that mutate DOM in created', () => {
+    // const container = document.createElement('div')
+    // container.innerHTML = `<div class="test red"></div>`
+    // const vColor: ObjectDirective = {
+    //   created(el, binding) {
+    //     el.classList.add(binding.value)
+    //   },
+    // }
+    // const app = createSSRApp({
+    //   setup() {
+    //     return () =>
+    //       withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
+    //   },
+    // })
+    // app.mount(container)
+    // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+  })
+
+  test.todo('escape css var name', () => {
+    // const container = document.createElement('div')
+    // container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`
+    // const app = createSSRApp({
+    //   setup() {
+    //     useCssVars(() => ({
+    //       'foo.bar': 'red',
+    //     }))
+    //     return () => h(Child)
+    //   },
+    // })
+    // const Child = {
+    //   setup() {
+    //     return () => h('div', { style: 'padding: 4px' })
+    //   },
+    // }
+    // app.mount(container)
+    // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+  })
+})
+
+describe('data-allow-mismatch', () => {
+  test('element text content', async () => {
+    const data = ref({ textContent: 'bar' })
+    const { container } = await mountWithHydration(
+      `<div data-allow-mismatch="text">foo</div>`,
+      `<div v-bind="data"></div>`,
+      data,
+    )
+    expect(container.innerHTML).toBe(
+      '<div data-allow-mismatch="text">bar</div>',
+    )
+    expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+  })
+  // test('not enough children', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children"></div>`,
+  //     () => h('div', [h('span', 'foo'), h('span', 'bar')]),
+  //   )
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>',
   //   )
-  //   expect(`mismatch`).not.toHaveBeenWarned()
+  //   expect(`Hydration children mismatch`).not.toHaveBeenWarned()
   // })
-
-  // test('transition appear', () => {
-  //   const { vnode, container } = mountWithHydration(
-  //     `<template><div>foo</div></template>`,
-  //     () =>
-  //       h(
-  //         Transition,
-  //         { appear: true },
-  //         {
-  //           default: () => h('div', 'foo'),
-  //         },
-  //       ),
+  // test('too many children', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
+  //     () => h('div', [h('span', 'foo')]),
   //   )
-  //   expect(container.firstChild).toMatchInlineSnapshot(`
-  //     <div
-  //       class="v-enter-from v-enter-active"
-  //     >
-  //       foo
-  //     </div>
-  //   `)
-  //   expect(vnode.el).toBe(container.firstChild)
-  //   expect(`mismatch`).not.toHaveBeenWarned()
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><span>foo</span></div>',
+  //   )
+  //   expect(`Hydration children mismatch`).not.toHaveBeenWarned()
   // })
-
-  // test('transition appear with v-if', () => {
-  //   const show = false
-  //   const { vnode, container } = mountWithHydration(
-  //     `<template><!----></template>`,
-  //     () =>
-  //       h(
-  //         Transition,
-  //         { appear: true },
-  //         {
-  //           default: () => (show ? h('div', 'foo') : createCommentVNode('')),
-  //         },
-  //       ),
+  test('complete mismatch', async () => {
+    const { container } = await mountWithHydration(
+      `<div data-allow-mismatch="children"><div>foo</div></div>`,
+      `<div><component :is="data">foo</component></div>`,
+      ref('span'),
+    )
+    expect(container.innerHTML).toBe(
+      '<div data-allow-mismatch="children"><span>foo</span><!--dynamic-component--></div>',
+    )
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+  })
+  // test('fragment mismatch removal', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
+  //     () => h('div', [h('span', 'replaced')]),
   //   )
-  //   expect(container.firstChild).toMatchInlineSnapshot('<!---->')
-  //   expect(vnode.el).toBe(container.firstChild)
-  //   expect(`mismatch`).not.toHaveBeenWarned()
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><span>replaced</span></div>',
+  //   )
+  //   expect(`Hydration node mismatch`).not.toHaveBeenWarned()
   // })
-
-  // test('transition appear with v-show', () => {
-  //   const show = false
-  //   const { vnode, container } = mountWithHydration(
-  //     `<template><div style="display: none;">foo</div></template>`,
-  //     () =>
-  //       h(
-  //         Transition,
-  //         { appear: true },
-  //         {
-  //           default: () =>
-  //             withDirectives(createVNode('div', null, 'foo'), [[vShow, show]]),
-  //         },
-  //       ),
+  // test('fragment not enough children', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
+  //     () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
   //   )
-  //   expect(container.firstChild).toMatchInlineSnapshot(`
-  //     <div
-  //       class="v-enter-from v-enter-active"
-  //       style="display: none;"
-  //     >
-  //       foo
-  //     </div>
-  //   `)
-  //   expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('')
-  //   expect(vnode.el).toBe(container.firstChild)
-  //   expect(`mismatch`).not.toHaveBeenWarned()
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
+  //   )
+  //   expect(`Hydration node mismatch`).not.toHaveBeenWarned()
   // })
-
-  // test('transition appear w/ event listener', async () => {
-  //   const container = document.createElement('div')
-  //   container.innerHTML = `<template><button>0</button></template>`
-  //   createSSRApp({
-  //     data() {
-  //       return {
-  //         count: 0,
-  //       }
-  //     },
-  //     template: `
-  //       <Transition appear>
-  //         <button @click="count++">{{count}}</button>
-  //       </Transition>
-  //     `,
-  //   }).mount(container)
-
-  //   expect(container.firstChild).toMatchInlineSnapshot(`
-  //     <button
-  //       class="v-enter-from v-enter-active"
-  //     >
-  //       0
-  //     </button>
-  //   `)
-
-  //   triggerEvent('click', container.querySelector('button')!)
-  //   await nextTick()
-  //   expect(container.firstChild).toMatchInlineSnapshot(`
-  //     <button
-  //       class="v-enter-from v-enter-active"
-  //     >
-  //       1
-  //     </button>
-  //   `)
+  // test('fragment too many children', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
+  //     () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
+  //   )
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>',
+  //   )
+  //   // fragment ends early and attempts to hydrate the extra <div>bar</div>
+  //   // as 2nd fragment child.
+  //   expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+  //   // excessive children removal
+  //   expect(`Hydration children mismatch`).not.toHaveBeenWarned()
   // })
-
-  // test('Suspense + transition appear', async () => {
-  //   const { vnode, container } = mountWithHydration(
-  //     `<template><div>foo</div></template>`,
-  //     () =>
-  //       h(Suspense, {}, () =>
-  //         h(
-  //           Transition,
-  //           { appear: true },
-  //           {
-  //             default: () => h('div', 'foo'),
-  //           },
-  //         ),
-  //       ),
+  // test('comment mismatch (element)', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children"><span></span></div>`,
+  //     () => h('div', [createCommentVNode('hi')]),
   //   )
-
-  //   expect(vnode.el).toBe(container.firstChild)
-  //   // wait for hydration to finish
-  //   await new Promise(r => setTimeout(r))
-
-  //   expect(container.firstChild).toMatchInlineSnapshot(`
-  //     <div
-  //       class="v-enter-from v-enter-active"
-  //     >
-  //       foo
-  //     </div>
-  //   `)
-  //   await nextTick()
-  //   expect(vnode.el).toBe(container.firstChild)
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><!--hi--></div>',
+  //   )
+  //   expect(`Hydration node mismatch`).not.toHaveBeenWarned()
   // })
-
-  // // #10607
-  // test('update component stable slot (prod + optimized mode)', async () => {
-  //   __DEV__ = false
-  //   try {
-  //     const container = document.createElement('div')
-  //     container.innerHTML = `<template><div show="false"><!--[--><div><div><!----></div></div><div>0</div><!--]--></div></template>`
-  //     const Comp = {
-  //       render(this: any) {
-  //         return (
-  //           openBlock(),
-  //           createElementBlock('div', null, [
-  //             renderSlot(this.$slots, 'default'),
-  //           ])
-  //         )
-  //       },
-  //     }
-  //     const show = ref(false)
-  //     const clicked = ref(false)
-
-  //     const Wrapper = {
-  //       setup() {
-  //         const items = ref<number[]>([])
-  //         onMounted(() => {
-  //           items.value = [1]
-  //         })
-  //         return () => {
-  //           return (
-  //             openBlock(),
-  //             createBlock(Comp, null, {
-  //               default: withCtx(() => [
-  //                 createElementVNode('div', null, [
-  //                   createElementVNode('div', null, [
-  //                     clicked.value
-  //                       ? (openBlock(),
-  //                         createElementBlock('div', { key: 0 }, 'foo'))
-  //                       : createCommentVNode('v-if', true),
-  //                   ]),
-  //                 ]),
-  //                 createElementVNode(
-  //                   'div',
-  //                   null,
-  //                   items.value.length,
-  //                   1 /* TEXT */,
-  //                 ),
-  //               ]),
-  //               _: 1 /* STABLE */,
-  //             })
-  //           )
-  //         }
-  //       },
-  //     }
-  //     createSSRApp({
-  //       components: { Wrapper },
-  //       data() {
-  //         return { show }
-  //       },
-  //       template: `<Wrapper :show="show"/>`,
-  //     }).mount(container)
-
-  //     await nextTick()
-  //     expect(container.innerHTML).toBe(
-  //       `<div show="false"><!--[--><div><div><!----></div></div><div>1</div><!--]--></div>`,
-  //     )
-
-  //     show.value = true
-  //     await nextTick()
-  //     expect(async () => {
-  //       clicked.value = true
-  //       await nextTick()
-  //     }).not.toThrow("Cannot read properties of null (reading 'insertBefore')")
-
-  //     await nextTick()
-  //     expect(container.innerHTML).toBe(
-  //       `<div show="true"><!--[--><div><div><div>foo</div></div></div><div>1</div><!--]--></div>`,
-  //     )
-  //   } catch (e) {
-  //     throw e
-  //   } finally {
-  //     __DEV__ = true
-  //   }
+  // test('comment mismatch (text)', () => {
+  //   const { container } = mountWithHydration(
+  //     `<div data-allow-mismatch="children">foobar</div>`,
+  //     () => h('div', [createCommentVNode('hi')]),
+  //   )
+  //   expect(container.innerHTML).toBe(
+  //     '<div data-allow-mismatch="children"><!--hi--></div>',
+  //   )
+  //   expect(`Hydration node mismatch`).not.toHaveBeenWarned()
   // })
+  test('class mismatch', async () => {
+    await mountWithHydration(
+      `<div class="foo bar" data-allow-mismatch="class"></div>`,
+      `<div :class="data"></div>`,
+      ref('foo'),
+    )
+    expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+  })
 
-  // describe('mismatch handling', () => {
-  //   test('text node', () => {
-  //     const { container } = mountWithHydration(`foo`, () => 'bar')
-  //     expect(container.textContent).toBe('bar')
-  //     expect(`Hydration text mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('element text content', () => {
-  //     const { container } = mountWithHydration(`<div>foo</div>`, () =>
-  //       h('div', 'bar'),
-  //     )
-  //     expect(container.innerHTML).toBe('<div>bar</div>')
-  //     expect(`Hydration text content mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('not enough children', () => {
-  //     const { container } = mountWithHydration(`<div></div>`, () =>
-  //       h('div', [h('span', 'foo'), h('span', 'bar')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div><span>foo</span><span>bar</span></div>',
-  //     )
-  //     expect(`Hydration children mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('too many children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div><span>foo</span><span>bar</span></div>`,
-  //       () => h('div', [h('span', 'foo')]),
-  //     )
-  //     expect(container.innerHTML).toBe('<div><span>foo</span></div>')
-  //     expect(`Hydration children mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('complete mismatch', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div><span>foo</span><span>bar</span></div>`,
-  //       () => h('div', [h('div', 'foo'), h('p', 'bar')]),
-  //     )
-  //     expect(container.innerHTML).toBe('<div><div>foo</div><p>bar</p></div>')
-  //     expect(`Hydration node mismatch`).toHaveBeenWarnedTimes(2)
-  //   })
-
-  //   test('fragment mismatch removal', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
-  //       () => h('div', [h('span', 'replaced')]),
-  //     )
-  //     expect(container.innerHTML).toBe('<div><span>replaced</span></div>')
-  //     expect(`Hydration node mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('fragment not enough children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
-  //       () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
-  //     )
-  //     expect(`Hydration node mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('fragment too many children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
-  //       () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>',
-  //     )
-  //     // fragment ends early and attempts to hydrate the extra <div>bar</div>
-  //     // as 2nd fragment child.
-  //     expect(`Hydration text content mismatch`).toHaveBeenWarned()
-  //     // excessive children removal
-  //     expect(`Hydration children mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('Teleport target has empty children', () => {
-  //     const teleportContainer = document.createElement('div')
-  //     teleportContainer.id = 'teleport'
-  //     document.body.appendChild(teleportContainer)
-
-  //     mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
-  //       h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
-  //     )
-  //     expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
-  //     expect(`Hydration children mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('comment mismatch (element)', () => {
-  //     const { container } = mountWithHydration(`<div><span></span></div>`, () =>
-  //       h('div', [createCommentVNode('hi')]),
-  //     )
-  //     expect(container.innerHTML).toBe('<div><!--hi--></div>')
-  //     expect(`Hydration node mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('comment mismatch (text)', () => {
-  //     const { container } = mountWithHydration(`<div>foobar</div>`, () =>
-  //       h('div', [createCommentVNode('hi')]),
-  //     )
-  //     expect(container.innerHTML).toBe('<div><!--hi--></div>')
-  //     expect(`Hydration node mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('class mismatch', () => {
-  //     mountWithHydration(`<div class="foo bar"></div>`, () =>
-  //       h('div', { class: ['foo', 'bar'] }),
-  //     )
-  //     mountWithHydration(`<div class="foo bar"></div>`, () =>
-  //       h('div', { class: { foo: true, bar: true } }),
-  //     )
-  //     mountWithHydration(`<div class="foo bar"></div>`, () =>
-  //       h('div', { class: 'foo bar' }),
-  //     )
-  //     // SVG classes
-  //     mountWithHydration(`<svg class="foo bar"></svg>`, () =>
-  //       h('svg', { class: 'foo bar' }),
-  //     )
-  //     // class with different order
-  //     mountWithHydration(`<div class="foo bar"></div>`, () =>
-  //       h('div', { class: 'bar foo' }),
-  //     )
-  //     expect(`Hydration class mismatch`).not.toHaveBeenWarned()
-  //     mountWithHydration(`<div class="foo bar"></div>`, () =>
-  //       h('div', { class: 'foo' }),
-  //     )
-  //     expect(`Hydration class mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   test('style mismatch', () => {
-  //     mountWithHydration(`<div style="color:red;"></div>`, () =>
-  //       h('div', { style: { color: 'red' } }),
-  //     )
-  //     mountWithHydration(`<div style="color:red;"></div>`, () =>
-  //       h('div', { style: `color:red;` }),
-  //     )
-  //     mountWithHydration(
-  //       `<div style="color:red; font-size: 12px;"></div>`,
-  //       () => h('div', { style: `font-size: 12px; color:red;` }),
-  //     )
-  //     mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
-  //       withDirectives(createVNode('div', { style: 'color: red' }, ''), [
-  //         [vShow, false],
-  //       ]),
-  //     )
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //     mountWithHydration(`<div style="color:red;"></div>`, () =>
-  //       h('div', { style: { color: 'green' } }),
-  //     )
-  //     expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
-  //   })
-
-  //   test('style mismatch when no style attribute is present', () => {
-  //     mountWithHydration(`<div></div>`, () =>
-  //       h('div', { style: { color: 'red' } }),
-  //     )
-  //     expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
-  //   })
-
-  //   test('style mismatch w/ v-show', () => {
-  //     mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
-  //       withDirectives(createVNode('div', { style: 'color: red' }, ''), [
-  //         [vShow, false],
-  //       ]),
-  //     )
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //     mountWithHydration(`<div style="color:red;"></div>`, () =>
-  //       withDirectives(createVNode('div', { style: 'color: red' }, ''), [
-  //         [vShow, false],
-  //       ]),
-  //     )
-  //     expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
-  //   })
-
-  //   test('attr mismatch', () => {
-  //     mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
-  //     mountWithHydration(`<div spellcheck></div>`, () =>
-  //       h('div', { spellcheck: '' }),
-  //     )
-  //     mountWithHydration(`<div></div>`, () => h('div', { id: undefined }))
-  //     // boolean
-  //     mountWithHydration(`<select multiple></div>`, () =>
-  //       h('select', { multiple: true }),
-  //     )
-  //     mountWithHydration(`<select multiple></div>`, () =>
-  //       h('select', { multiple: 'multiple' }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
-  //     mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))
-  //     expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(1)
-
-  //     mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
-  //     expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
-  //   })
-
-  //   test('attr special case: textarea value', () => {
-  //     mountWithHydration(`<textarea>foo</textarea>`, () =>
-  //       h('textarea', { value: 'foo' }),
-  //     )
-  //     mountWithHydration(`<textarea></textarea>`, () =>
-  //       h('textarea', { value: '' }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
-  //     mountWithHydration(`<textarea>foo</textarea>`, () =>
-  //       h('textarea', { value: 'bar' }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).toHaveBeenWarned()
-  //   })
-
-  //   // #11873
-  //   test('<textarea> with newlines at the beginning', async () => {
-  //     const render = () => h('textarea', null, '\nhello')
-  //     const html = await renderToString(createSSRApp({ render }))
-  //     mountWithHydration(html, render)
-  //     expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('<pre> with newlines at the beginning', async () => {
-  //     const render = () => h('pre', null, '\n')
-  //     const html = await renderToString(createSSRApp({ render }))
-  //     mountWithHydration(html, render)
-  //     expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('boolean attr handling', () => {
-  //     mountWithHydration(`<input />`, () => h('input', { readonly: false }))
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
-  //     mountWithHydration(`<input readonly />`, () =>
-  //       h('input', { readonly: true }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
-  //     mountWithHydration(`<input readonly="readonly" />`, () =>
-  //       h('input', { readonly: true }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('client value is null or undefined', () => {
-  //     mountWithHydration(`<div></div>`, () =>
-  //       h('div', { draggable: undefined }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-
-  //     mountWithHydration(`<input />`, () => h('input', { type: null }))
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('should not warn against object values', () => {
-  //     mountWithHydration(`<input />`, () => h('input', { from: {} }))
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('should not warn on falsy bindings of non-property keys', () => {
-  //     mountWithHydration(`<button />`, () => h('button', { href: undefined }))
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('should not warn on non-renderable option values', () => {
-  //     mountWithHydration(`<select><option>hello</option></select>`, () =>
-  //       h('select', [h('option', { value: ['foo'] }, 'hello')]),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('should not warn css v-bind', () => {
-  //     const container = document.createElement('div')
-  //     container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
-  //     const app = createSSRApp({
-  //       setup() {
-  //         useCssVars(() => ({
-  //           foo: 'red',
-  //         }))
-  //         return () => h('div', { style: { color: 'var(--foo)' } })
-  //       },
-  //     })
-  //     app.mount(container)
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   // #10317 - test case from #10325
-  //   test('css vars should only be added to expected on component root dom', () => {
-  //     const container = document.createElement('div')
-  //     container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
-  //     const app = createSSRApp({
-  //       setup() {
-  //         useCssVars(() => ({
-  //           foo: 'red',
-  //         }))
-  //         return () =>
-  //           h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
-  //       },
-  //     })
-  //     app.mount(container)
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   // #11188
-  //   test('css vars support fallthrough', () => {
-  //     const container = document.createElement('div')
-  //     container.innerHTML = `<div style="padding: 4px;--foo:red;"></div>`
-  //     const app = createSSRApp({
-  //       setup() {
-  //         useCssVars(() => ({
-  //           foo: 'red',
-  //         }))
-  //         return () => h(Child)
-  //       },
-  //     })
-  //     const Child = {
-  //       setup() {
-  //         return () => h('div', { style: 'padding: 4px' })
-  //       },
-  //     }
-  //     app.mount(container)
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   // #11189
-  //   test('should not warn for directives that mutate DOM in created', () => {
-  //     const container = document.createElement('div')
-  //     container.innerHTML = `<div class="test red"></div>`
-  //     const vColor: ObjectDirective = {
-  //       created(el, binding) {
-  //         el.classList.add(binding.value)
-  //       },
-  //     }
-  //     const app = createSSRApp({
-  //       setup() {
-  //         return () =>
-  //           withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
-  //       },
-  //     })
-  //     app.mount(container)
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('escape css var name', () => {
-  //     const container = document.createElement('div')
-  //     container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`
-  //     const app = createSSRApp({
-  //       setup() {
-  //         useCssVars(() => ({
-  //           'foo.bar': 'red',
-  //         }))
-  //         return () => h(Child)
-  //       },
-  //     })
-  //     const Child = {
-  //       setup() {
-  //         return () => h('div', { style: 'padding: 4px' })
-  //       },
-  //     }
-  //     app.mount(container)
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //   })
-  // })
+  test('style mismatch', async () => {
+    await mountWithHydration(
+      `<div style="color:red;" data-allow-mismatch="style"></div>`,
+      `<div :style="data"></div>`,
+      ref({ color: 'green' }),
+    )
+    expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+  })
 
-  // describe('data-allow-mismatch', () => {
-  //   test('element text content', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="text">foo</div>`,
-  //       () => h('div', 'bar'),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="text">bar</div>',
-  //     )
-  //     expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('not enough children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"></div>`,
-  //       () => h('div', [h('span', 'foo'), h('span', 'bar')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>',
-  //     )
-  //     expect(`Hydration children mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('too many children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
-  //       () => h('div', [h('span', 'foo')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><span>foo</span></div>',
-  //     )
-  //     expect(`Hydration children mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('complete mismatch', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"><span>foo</span><span>bar</span></div>`,
-  //       () => h('div', [h('div', 'foo'), h('p', 'bar')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><div>foo</div><p>bar</p></div>',
-  //     )
-  //     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('fragment mismatch removal', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
-  //       () => h('div', [h('span', 'replaced')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><span>replaced</span></div>',
-  //     )
-  //     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('fragment not enough children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
-  //       () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
-  //     )
-  //     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('fragment too many children', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
-  //       () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><!--[--><div>foo</div><!--]--><div>baz</div></div>',
-  //     )
-  //     // fragment ends early and attempts to hydrate the extra <div>bar</div>
-  //     // as 2nd fragment child.
-  //     expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
-  //     // excessive children removal
-  //     expect(`Hydration children mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('comment mismatch (element)', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children"><span></span></div>`,
-  //       () => h('div', [createCommentVNode('hi')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><!--hi--></div>',
-  //     )
-  //     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('comment mismatch (text)', () => {
-  //     const { container } = mountWithHydration(
-  //       `<div data-allow-mismatch="children">foobar</div>`,
-  //       () => h('div', [createCommentVNode('hi')]),
-  //     )
-  //     expect(container.innerHTML).toBe(
-  //       '<div data-allow-mismatch="children"><!--hi--></div>',
-  //     )
-  //     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('class mismatch', () => {
-  //     mountWithHydration(
-  //       `<div class="foo bar" data-allow-mismatch="class"></div>`,
-  //       () => h('div', { class: 'foo' }),
-  //     )
-  //     expect(`Hydration class mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('style mismatch', () => {
-  //     mountWithHydration(
-  //       `<div style="color:red;" data-allow-mismatch="style"></div>`,
-  //       () => h('div', { style: { color: 'green' } }),
-  //     )
-  //     expect(`Hydration style mismatch`).not.toHaveBeenWarned()
-  //   })
-
-  //   test('attr mismatch', () => {
-  //     mountWithHydration(`<div data-allow-mismatch="attribute"></div>`, () =>
-  //       h('div', { id: 'foo' }),
-  //     )
-  //     mountWithHydration(
-  //       `<div id="bar" data-allow-mismatch="attribute"></div>`,
-  //       () => h('div', { id: 'foo' }),
-  //     )
-  //     expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
-  //   })
-  // })
+  test('attr mismatch', async () => {
+    await mountWithHydration(
+      `<div data-allow-mismatch="attribute"></div>`,
+      `<div :id="data"></div>`,
+      ref('foo'),
+    )
+
+    await mountWithHydration(
+      `<div id="bar" data-allow-mismatch="attribute"></div>`,
+      `<div :id="data"></div>`,
+      ref('foo'),
+    )
+
+    expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+  })
+})
+
+describe('VDOM interop', () => {
+  test('basic render vapor component', async () => {
+    const data = ref(true)
+    const { container } = await testWithVDOMApp(
+      `<script setup>const data = _data; const components = _components;</script>
+      <template>
+        <components.VaporChild/>
+      </template>`,
+      {
+        VaporChild: {
+          code: `<template>{{ data }}</template>`,
+          vapor: true,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"true"`)
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"false"`)
+  })
+
+  test('nested components (VDOM -> Vapor -> VDOM)', async () => {
+    const data = ref(true)
+    const { container } = await testWithVDOMApp(
+      `<script setup>const data = _data; const components = _components;</script>
+      <template>
+        <components.VaporChild/>
+      </template>`,
+      {
+        VaporChild: {
+          code: `<template><components.VdomChild/></template>`,
+          vapor: true,
+        },
+        VdomChild: {
+          code: `<script setup>const data = _data;</script>
+            <template>{{ data }}</template>`,
+          vapor: false,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"true"`)
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(`"false"`)
+  })
+
+  test('nested components (VDOM -> Vapor -> VDOM (with slot fallback))', async () => {
+    const data = ref(true)
+    const { container } = await testWithVDOMApp(
+      `<script setup>const data = _data; const components = _components;</script>
+      <template>
+        <components.VaporChild/>
+      </template>`,
+      {
+        VaporChild: {
+          code: `<template><components.VdomChild/></template>`,
+          vapor: true,
+        },
+        VdomChild: {
+          code: `<script setup>const data = _data;</script>
+            <template><slot><span>{{data}}</span></slot></template>`,
+          vapor: false,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><span>true</span><!--]-->
+      "
+    `,
+    )
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><span>false</span><!--]-->
+      "
+    `,
+    )
+  })
+
+  test('nested components (VDOM -> Vapor(with slot content) -> VDOM)', async () => {
+    const data = ref(true)
+    const { container } = await testWithVDOMApp(
+      `<script setup>const data = _data; const components = _components;</script>
+          <template>
+            <components.VaporChild/>
+          </template>`,
+      {
+        VaporChild: {
+          code: `<template>
+            <components.VdomChild>
+              <template #default>
+                <span>{{data}} vapor fallback</span>
+              </template>
+            </components.VdomChild>
+          </template>`,
+          vapor: true,
+        },
+        VdomChild: {
+          code: `<script setup>const data = _data;</script>
+            <template><slot><span>vdom fallback</span></slot></template>`,
+          vapor: false,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><span>true vapor fallback</span><!--]-->
+      "
+    `,
+    )
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><span>false vapor fallback</span><!--]-->
+      "
+    `,
+    )
+  })
+
+  test('nested components (VDOM -> Vapor(with slot content) -> Vapor)', async () => {
+    const data = ref(true)
+    const { container } = await testWithVDOMApp(
+      `<script setup>const data = _data; const components = _components;</script>
+          <template>
+            <components.VaporChild/>
+          </template>`,
+      {
+        VaporChild: {
+          code: `<template>
+            <components.VaporChild2>
+              <template #default>
+                <span>{{data}} vapor fallback</span>
+              </template>
+            </components.VaporChild2>
+          </template>`,
+          vapor: true,
+        },
+        VaporChild2: {
+          code: `<template><slot><span>vapor fallback2</span></slot></template>`,
+          vapor: true,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><span>true vapor fallback</span><!--]-->
+      "
+    `,
+    )
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "
+      <!--[--><span>false vapor fallback</span><!--]-->
+      "
+    `,
+    )
+  })
+
+  test('vapor slot render vdom component', async () => {
+    const data = ref(true)
+    const { container } = await testWithVDOMApp(
+      `<script setup>const data = _data; const components = _components;</script>
+      <template>
+        <components.VaporChild>
+          <components.VdomChild/>
+        </components.VaporChild>
+      </template>`,
+      {
+        VaporChild: {
+          code: `<template><div><slot/></div></template>`,
+          vapor: true,
+        },
+        VdomChild: {
+          code: `<script setup>const data = _data;</script>
+            <template>{{ data }}</template>`,
+          vapor: false,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "<div>
+      <!--[-->true<!--]-->
+      </div>"
+    `,
+    )
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "<div>
+      <!--[-->false<!--]-->
+      </div>"
+    `,
+    )
+  })
+
+  test('vapor slot render vdom component (render function)', async () => {
+    const data = ref(true)
+    const { container } = await testWithVaporApp(
+      `<script setup>
+        import { h } from 'vue'
+        const data = _data; const components = _components;
+        const VdomChild = {
+          setup() {
+            return () => h('div', null, [h('div', [String(data.value)])])
+          }
+        }
+      </script>
+      <template>
+        <components.VaporChild>
+          <VdomChild/>
+        </components.VaporChild>
+      </template>`,
+      {
+        VaporChild: {
+          code: `<template><div><slot/></div></template>`,
+          vapor: true,
+        },
+      },
+      data,
+    )
+
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "<div>
+      <!--[--><div><div>true</div></div><!--]-->
+      </div>"
+    `,
+    )
 
-  test.todo('Teleport')
-  test.todo('Suspense')
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+
+    data.value = false
+    await nextTick()
+    expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+      `
+      "<div>
+      <!--[--><div><div>false</div></div><!--]-->
+      </div>"
+    `,
+    )
+  })
 })
diff --git a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
index 945e0f38d87..8849ed24fef 100644
--- a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
@@ -9,7 +9,7 @@ import {
   insertionParent,
   resetInsertionState,
 } from './insertionState'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
+import { advanceHydrationNode, isHydrating } from './dom/hydration'
 
 export function createDynamicComponent(
   getter: () => any,
@@ -19,15 +19,12 @@ export function createDynamicComponent(
 ): VaporFragment {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
-  if (isHydrating) {
-    locateHydrationNode()
-  } else {
-    resetInsertionState()
-  }
+  if (!isHydrating) resetInsertionState()
 
-  const frag = __DEV__
-    ? new DynamicFragment('dynamic-component')
-    : new DynamicFragment()
+  const frag =
+    isHydrating || __DEV__
+      ? new DynamicFragment('dynamic-component')
+      : new DynamicFragment()
 
   renderEffect(() => {
     const value = getter()
@@ -43,9 +40,12 @@ export function createDynamicComponent(
     )
   })
 
-  if (!isHydrating && _insertionParent) {
-    insert(frag, _insertionParent, _insertionAnchor)
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+  } else {
+    if (_insertionAnchor !== undefined) {
+      advanceHydrationNode(_insertionParent!)
+    }
   }
-
   return frag
 }
diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
index bdd2af7b348..63f314a0367 100644
--- a/packages/runtime-vapor/src/apiCreateFor.ts
+++ b/packages/runtime-vapor/src/apiCreateFor.ts
@@ -16,6 +16,7 @@ import { createComment, createTextNode } from './dom/node'
 import {
   type Block,
   VaporFragment,
+  findLastChild,
   insert,
   remove as removeBlock,
 } from './block'
@@ -24,7 +25,13 @@ import { currentInstance, isVaporComponent } from './component'
 import type { DynamicSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { VaporVForFlags } from '../../shared/src/vaporFlags'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
+import {
+  advanceHydrationNode,
+  isHydrating,
+  locateFragmentEndAnchor,
+  locateHydrationNode,
+  setCurrentHydrationNode,
+} from './dom/hydration'
 import {
   insertionAnchor,
   insertionParent,
@@ -92,8 +99,11 @@ export const createFor = (
   let parent: ParentNode | undefined | null
   // useSelector only
   let currentKey: any
-  // TODO handle this in hydration
-  const parentAnchor = __DEV__ ? createComment('for') : createTextNode()
+  let parentAnchor: Node
+  if (!isHydrating) {
+    parentAnchor = __DEV__ ? createComment('for') : createTextNode()
+  }
+
   const frag = new VaporFragment(oldBlocks)
   const instance = currentInstance!
   const canUseFastRemove = !!(flags & VaporVForFlags.FAST_REMOVE)
@@ -118,8 +128,28 @@ export const createFor = (
     if (!isMounted) {
       isMounted = true
       for (let i = 0; i < newLength; i++) {
+        if (isHydrating && isComponent && i > 0) {
+          setCurrentHydrationNode(
+            findLastChild(newBlocks[i - 1].nodes)!.nextSibling,
+          )
+        }
         mount(source, i)
       }
+
+      if (isHydrating) {
+        if (isComponent) {
+          setCurrentHydrationNode(
+            findLastChild(newBlocks[newLength - 1].nodes)!.nextSibling,
+          )
+        }
+        parentAnchor = locateFragmentEndAnchor()!
+        if (__DEV__) {
+          if (!parentAnchor) {
+            throw new Error(`v-for fragment anchor node was not found.`)
+          }
+          ;(parentAnchor as Comment).data = 'for'
+        }
+      }
     } else {
       parent = parent || parentAnchor!.parentNode
       if (!oldLength) {
@@ -430,8 +460,12 @@ export const createFor = (
     renderEffect(renderList)
   }
 
-  if (!isHydrating && _insertionParent) {
-    insert(frag, _insertionParent, _insertionAnchor)
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+  } else {
+    advanceHydrationNode(
+      _insertionAnchor !== undefined ? _insertionParent! : parentAnchor!,
+    )
   }
 
   return frag
diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts
index f573a61b16b..bdfaa85bc8c 100644
--- a/packages/runtime-vapor/src/apiCreateIf.ts
+++ b/packages/runtime-vapor/src/apiCreateIf.ts
@@ -1,5 +1,5 @@
 import { type Block, type BlockFn, DynamicFragment, insert } from './block'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
+import { advanceHydrationNode, isHydrating } from './dom/hydration'
 import {
   insertionAnchor,
   insertionParent,
@@ -15,22 +15,29 @@ export function createIf(
 ): Block {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
-  if (isHydrating) {
-    locateHydrationNode()
-  } else {
-    resetInsertionState()
-  }
+  if (!isHydrating) resetInsertionState()
 
   let frag: Block
   if (once) {
     frag = condition() ? b1() : b2 ? b2() : []
   } else {
-    frag = __DEV__ ? new DynamicFragment('if') : new DynamicFragment()
+    frag =
+      isHydrating || __DEV__ ? new DynamicFragment('if') : new DynamicFragment()
     renderEffect(() => (frag as DynamicFragment).update(condition() ? b1 : b2))
   }
 
-  if (!isHydrating && _insertionParent) {
-    insert(frag, _insertionParent, _insertionAnchor)
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+  } else {
+    // After block node hydration is completed, advance currentHydrationNode to
+    // _insertionParent's next sibling if _insertionAnchor has a value
+    // _insertionAnchor values:
+    // 1. insert: _insertionAnchor is a static node, no hydration needed
+    // 2. append: block node is appended, potentially without next sibling
+    // 3. prepend: next sibling of current block node is static, no hydration needed
+    if (_insertionAnchor !== undefined) {
+      advanceHydrationNode(_insertionParent!)
+    }
   }
 
   return frag
diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index ba84161a71b..2f791c0a552 100644
--- a/packages/runtime-vapor/src/block.ts
+++ b/packages/runtime-vapor/src/block.ts
@@ -5,9 +5,17 @@ import {
   mountComponent,
   unmountComponent,
 } from './component'
-import { createComment, createTextNode } from './dom/node'
+import { child, createComment, createTextNode } from './dom/node'
 import { EffectScope, setActiveSub } from '@vue/reactivity'
-import { isHydrating } from './dom/hydration'
+import {
+  advanceHydrationNode,
+  currentHydrationNode,
+  isComment,
+  isHydrating,
+  locateFragmentEndAnchor,
+  locateHydrationNode,
+} from './dom/hydration'
+import { incrementIndexOffset } from './insertionState'
 
 export type Block =
   | Node
@@ -23,6 +31,7 @@ export class VaporFragment {
   anchor?: Node
   insert?: (parent: ParentNode, anchor: Node | null) => void
   remove?: (parent?: ParentNode) => void
+  hydrate?: (...args: any[]) => any
 
   constructor(nodes: Block) {
     this.nodes = nodes
@@ -30,25 +39,32 @@ export class VaporFragment {
 }
 
 export class DynamicFragment extends VaporFragment {
-  anchor: Node
+  anchor!: Node
   scope: EffectScope | undefined
   current?: BlockFn
   fallback?: BlockFn
+  anchorLabel?: string
 
   constructor(anchorLabel?: string) {
     super([])
-    this.anchor =
-      __DEV__ && anchorLabel ? createComment(anchorLabel) : createTextNode()
+    if (isHydrating) {
+      this.anchorLabel = anchorLabel
+      locateHydrationNode()
+    } else {
+      this.anchor =
+        __DEV__ && anchorLabel ? createComment(anchorLabel) : createTextNode()
+    }
   }
 
   update(render?: BlockFn, key: any = render): void {
     if (key === this.current) {
+      if (isHydrating) this.hydrate(true)
       return
     }
     this.current = key
 
     const prevSub = setActiveSub()
-    const parent = this.anchor.parentNode
+    const parent = isHydrating ? null : this.anchor.parentNode
 
     // teardown previous branch
     if (this.scope) {
@@ -74,6 +90,56 @@ export class DynamicFragment extends VaporFragment {
     }
 
     setActiveSub(prevSub)
+
+    if (isHydrating) this.hydrate()
+  }
+
+  hydrate = (isEmpty = false): void => {
+    // avoid repeated hydration during rendering fallback
+    if (this.anchor) return
+
+    // reuse the empty comment node as the anchor for empty if
+    if (this.anchorLabel === 'if' && isEmpty) {
+      this.anchor = locateFragmentEndAnchor('')!
+      if (!this.anchor) {
+        throw new Error('Failed to locate if anchor')
+      } else {
+        ;(this.anchor as Comment).data = this.anchorLabel
+        return
+      }
+    }
+
+    if (this.anchorLabel === 'slot') {
+      // reuse the empty comment node for empty slot
+      // e.g. `<slot v-if="false"></slot>`
+      if (isEmpty && isComment(currentHydrationNode!, '')) {
+        this.anchor = currentHydrationNode!
+        if (__DEV__) {
+          ;(this.anchor as Comment).data = this.anchorLabel!
+        }
+        return
+      }
+
+      // reuse the vdom fragment end anchor for slots
+      this.anchor = locateFragmentEndAnchor()!
+      if (!this.anchor) {
+        throw new Error('Failed to locate slot anchor')
+      } else {
+        return
+      }
+    }
+
+    // create an anchor
+    const { parentNode, nextSibling } = findLastChild(this)!
+    parentNode!.insertBefore(
+      (this.anchor = __DEV__
+        ? createComment(this.anchorLabel!)
+        : createTextNode()),
+      nextSibling,
+    )
+    // increment index offset since we dynamically inserted a comment node
+    incrementIndexOffset(parentNode!)
+    advanceHydrationNode(this.anchor)
   }
 }
 
@@ -96,7 +162,7 @@ export function isValidBlock(block: Block): boolean {
   } else if (isVaporComponent(block)) {
     return isValidBlock(block.block)
   } else if (isArray(block)) {
-    return block.length > 0 && block.every(isValidBlock)
+    return block.length > 0 && block.some(isValidBlock)
   } else {
     // fragment
     return isValidBlock(block.nodes)
@@ -105,10 +171,10 @@ export function isValidBlock(block: Block): boolean {
 
 export function insert(
   block: Block,
-  parent: ParentNode & { $anchor?: Node | null },
+  parent: ParentNode,
   anchor: Node | null | 0 = null, // 0 means prepend
 ): void {
-  anchor = anchor === 0 ? parent.$anchor || parent.firstChild : anchor
+  anchor = anchor === 0 ? child(parent) : anchor
   if (block instanceof Node) {
     if (!isHydrating) {
       parent.insertBefore(block, anchor)
@@ -126,7 +192,6 @@ export function insert(
   } else {
     // fragment
     if (block.insert) {
-      // TODO handle hydration for vdom interop
       block.insert(parent, anchor)
     } else {
       insert(block.nodes, parent, anchor)
@@ -187,3 +252,16 @@ export function normalizeBlock(block: Block): Node[] {
   }
   return nodes
 }
+
+export function findLastChild(node: Block): Node | undefined | null {
+  if (node && node instanceof Node) {
+    return node
+  } else if (isArray(node)) {
+    return findLastChild(node[node.length - 1])
+  } else if (isVaporComponent(node)) {
+    return findLastChild(node.block!)
+  } else {
+    if (node instanceof DynamicFragment && node.anchor) return node.anchor
+    return findLastChild(node.nodes!)
+  }
+}
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 08fd881e959..773d0f693a0 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -42,7 +42,6 @@ import {
   getPropsProxyHandlers,
   hasFallthroughAttrs,
   normalizePropsOptions,
-  resolveDynamicProps,
   setupPropsValidation,
 } from './componentProps'
 import { renderEffect } from './renderEffect'
@@ -57,12 +56,20 @@ import {
   getSlot,
 } from './componentSlots'
 import { hmrReload, hmrRerender } from './hmr'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
+import {
+  adoptTemplate,
+  advanceHydrationNode,
+  currentHydrationNode,
+  isHydrating,
+  locateHydrationNode,
+  setCurrentHydrationNode,
+} from './dom/hydration'
 import {
   insertionAnchor,
   insertionParent,
   resetInsertionState,
 } from './insertionState'
+import { createElement } from './dom/node'
 
 export { currentInstance } from '@vue/runtime-dom'
 
@@ -174,8 +181,14 @@ export function createComponent(
       rawProps,
       rawSlots,
     )
-    if (!isHydrating && _insertionParent) {
-      insert(frag, _insertionParent, _insertionAnchor)
+
+    if (!isHydrating) {
+      if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+    } else {
+      frag.hydrate()
+      if (_insertionAnchor !== undefined) {
+        advanceHydrationNode(_insertionParent!)
+      }
     }
     return frag
   }
@@ -266,7 +279,7 @@ export function createComponent(
   }
 
   setActiveSub(prevSub)
-  setCurrentInstance(...prevInstance)
+  setCurrentInstance.apply(null, prevInstance)
 
   if (__DEV__) {
     popWarningContext()
@@ -275,10 +288,14 @@ export function createComponent(
 
   onScopeDispose(() => unmountComponent(instance), true)
 
-  if (!isHydrating && _insertionParent) {
+  if (_insertionParent) {
     mountComponent(instance, _insertionParent, _insertionAnchor)
   }
 
+  if (isHydrating && _insertionAnchor !== undefined) {
+    advanceHydrationNode(_insertionParent!)
+  }
+
   return instance
 }
 
@@ -499,26 +516,34 @@ export function createComponentWithFallback(
     resetInsertionState()
   }
 
-  const el = document.createElement(comp)
+  const el = isHydrating
+    ? (adoptTemplate(currentHydrationNode!, `<${comp}/>`) as HTMLElement)
+    : createElement(comp)
   // mark single root
   ;(el as any).$root = isSingleRoot
 
-  if (rawProps) {
-    renderEffect(() => {
-      setDynamicProps(el, [resolveDynamicProps(rawProps as RawProps)])
-    })
-  }
-
   if (rawSlots) {
+    let prev: Node
+    if (isHydrating) {
+      prev = currentHydrationNode!
+      setCurrentHydrationNode(el.firstChild)
+    }
     if (rawSlots.$) {
       // TODO dynamic slot fragment
     } else {
       insert(getSlot(rawSlots as RawSlots, 'default')!(), el)
     }
+    if (isHydrating) {
+      setCurrentHydrationNode(prev!)
+    }
   }
 
-  if (!isHydrating && _insertionParent) {
-    insert(el, _insertionParent, _insertionAnchor)
+  if (!isHydrating) {
+    if (_insertionParent) insert(el, _insertionParent, _insertionAnchor)
+  } else {
+    if (_insertionAnchor !== undefined) {
+      advanceHydrationNode(_insertionParent!)
+    }
   }
 
   return el
diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts
index 55eadb98046..13466eaff90 100644
--- a/packages/runtime-vapor/src/componentProps.ts
+++ b/packages/runtime-vapor/src/componentProps.ts
@@ -264,7 +264,7 @@ function resolveDefault(
 ) {
   const prev = setCurrentInstance(instance)
   const res = factory.call(null, instance.props)
-  setCurrentInstance(...prev)
+  setCurrentInstance.apply(null, prev)
   return res
 }
 
diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 100c99cdb8a..4e02c86ce42 100644
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -1,5 +1,11 @@
 import { EMPTY_OBJ, NO, hasOwn, isArray, isFunction } from '@vue/shared'
-import { type Block, type BlockFn, DynamicFragment, insert } from './block'
+import {
+  type Block,
+  type BlockFn,
+  DynamicFragment,
+  type VaporFragment,
+  insert,
+} from './block'
 import { rawPropsProxyHandlers } from './componentProps'
 import { currentInstance, isRef } from '@vue/runtime-dom'
 import type { LooseRawProps, VaporComponentInstance } from './component'
@@ -9,7 +15,11 @@ import {
   insertionParent,
   resetInsertionState,
 } from './insertionState'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
+import {
+  advanceHydrationNode,
+  isHydrating,
+  locateHydrationNode,
+} from './dom/hydration'
 
 export type RawSlots = Record<string, VaporSlot> & {
   $?: DynamicSlotSource[]
@@ -98,11 +108,7 @@ export function createSlot(
 ): Block {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
-  if (isHydrating) {
-    locateHydrationNode()
-  } else {
-    resetInsertionState()
-  }
+  if (!isHydrating) resetInsertionState()
 
   const instance = currentInstance as VaporComponentInstance
   const rawSlots = instance.rawSlots
@@ -111,8 +117,8 @@ export function createSlot(
     : EMPTY_OBJ
 
   let fragment: DynamicFragment
-
   if (isRef(rawSlots._)) {
+    if (isHydrating) locateHydrationNode()
     fragment = instance.appContext.vapor!.vdomSlot(
       rawSlots._,
       name,
@@ -121,7 +127,10 @@ export function createSlot(
       fallback,
     )
   } else {
-    fragment = __DEV__ ? new DynamicFragment('slot') : new DynamicFragment()
+    fragment =
+      isHydrating || __DEV__
+        ? new DynamicFragment('slot')
+        : new DynamicFragment()
     const isDynamicName = isFunction(name)
     const renderSlot = () => {
       const slot = getSlot(rawSlots, isFunction(name) ? name() : name)
@@ -151,8 +160,15 @@ export function createSlot(
     }
   }
 
-  if (!isHydrating && _insertionParent) {
-    insert(fragment, _insertionParent, _insertionAnchor)
+  if (!isHydrating) {
+    if (_insertionParent) insert(fragment, _insertionParent, _insertionAnchor)
+  } else {
+    if (fragment.insert) {
+      ;(fragment as VaporFragment).hydrate!()
+    }
+    if (_insertionAnchor !== undefined) {
+      advanceHydrationNode(_insertionParent!)
+    }
   }
 
   return fragment
diff --git a/packages/runtime-vapor/src/directives/vShow.ts b/packages/runtime-vapor/src/directives/vShow.ts
index 6ed28dfddfe..936b9a22c47 100644
--- a/packages/runtime-vapor/src/directives/vShow.ts
+++ b/packages/runtime-vapor/src/directives/vShow.ts
@@ -1,13 +1,16 @@
 import {
+  MismatchTypes,
   type VShowElement,
   vShowHidden,
   vShowOriginalDisplay,
   warn,
+  warnPropMismatch,
 } from '@vue/runtime-dom'
 import { renderEffect } from '../renderEffect'
 import { isVaporComponent } from '../component'
 import { type Block, DynamicFragment, VaporFragment } from '../block'
 import { isArray } from '@vue/shared'
+import { isHydrating, logMismatchError } from '../dom/hydration'
 
 export function applyVShow(target: Block, source: () => any): void {
   if (isVaporComponent(target)) {
@@ -55,7 +58,28 @@ function setDisplay(target: Block, value: unknown): void {
       el[vShowOriginalDisplay] =
         el.style.display === 'none' ? '' : el.style.display
     }
-    el.style.display = value ? el[vShowOriginalDisplay]! : 'none'
+
+    if (
+      (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+      isHydrating
+    ) {
+      if (!value && el.style.display !== 'none') {
+        warnPropMismatch(
+          el,
+          'style',
+          MismatchTypes.STYLE,
+          `display: ${el.style.display}`,
+          'display: none',
+        )
+        logMismatchError()
+
+        el.style.display = 'none'
+        el[vShowOriginalDisplay] = ''
+      }
+    } else {
+      el.style.display = value ? el[vShowOriginalDisplay]! : 'none'
+    }
+
     el[vShowHidden] = !value
   } else if (__DEV__) {
     warn(
diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts
index d34d9db7da5..f94d6fad3ce 100644
--- a/packages/runtime-vapor/src/dom/hydration.ts
+++ b/packages/runtime-vapor/src/dom/hydration.ts
@@ -1,121 +1,211 @@
-import { warn } from '@vue/runtime-dom'
+import { MismatchTypes, isMismatchAllowed, warn } from '@vue/runtime-dom'
 import {
+  type ChildItem,
+  incrementIndexOffset,
   insertionAnchor,
   insertionParent,
   resetInsertionState,
   setInsertionState,
 } from '../insertionState'
-import { child, next } from './node'
+import {
+  _child,
+  _next,
+  child,
+  createElement,
+  createTextNode,
+  disableHydrationNodeHelper,
+  enableHydrationNodeHelper,
+  parentNode,
+} from './node'
+import { remove } from '../block'
 
+const isHydratingStack = [] as boolean[]
 export let isHydrating = false
 export let currentHydrationNode: Node | null = null
 
-export function setCurrentHydrationNode(node: Node | null): void {
-  currentHydrationNode = node
-}
-
 let isOptimized = false
 
-export function withHydration(container: ParentNode, fn: () => void): void {
-  adoptTemplate = adoptTemplateImpl
-  locateHydrationNode = locateHydrationNodeImpl
+function performHydration<T>(
+  fn: () => T,
+  setup: () => void,
+  cleanup: () => void,
+): T {
   if (!isOptimized) {
+    adoptTemplate = adoptTemplateImpl
+    locateHydrationNode = locateHydrationNodeImpl
     // optimize anchor cache lookup
-    ;(Comment.prototype as any).$fs = undefined
+    ;(Comment.prototype as any).$fe = undefined
+    ;(Node.prototype as any).$pns = undefined
+    ;(Node.prototype as any).$uc = undefined
+    ;(Node.prototype as any).$idx = undefined
+    ;(Node.prototype as any).$children = undefined
+    ;(Node.prototype as any).$idxMap = undefined
+    ;(Node.prototype as any).$prevDynamicCount = undefined
+    ;(Node.prototype as any).$anchorCount = undefined
+    ;(Node.prototype as any).$appendIndex = undefined
+    ;(Node.prototype as any).$indexOffset = undefined
     isOptimized = true
   }
-  isHydrating = true
-  setInsertionState(container, 0)
+  enableHydrationNodeHelper()
+  isHydratingStack.push((isHydrating = true))
+  setup()
   const res = fn()
-  resetInsertionState()
+  cleanup()
   currentHydrationNode = null
-  isHydrating = false
+  isHydratingStack.pop()
+  isHydrating = isHydratingStack[isHydratingStack.length - 1] || false
+  if (!isHydrating) disableHydrationNodeHelper()
   return res
 }
 
+export function withHydration(container: ParentNode, fn: () => void): void {
+  const setup = () => setInsertionState(container)
+  const cleanup = () => resetInsertionState()
+  return performHydration(fn, setup, cleanup)
+}
+
+export function hydrateNode(node: Node, fn: () => void): void {
+  const setup = () => (currentHydrationNode = node)
+  const cleanup = () => {}
+  return performHydration(fn, setup, cleanup)
+}
+
 export let adoptTemplate: (node: Node, template: string) => Node | null
 export let locateHydrationNode: () => void
 
 type Anchor = Comment & {
-  // cached matching fragment start to avoid repeated traversal
+  // cached matching fragment end to avoid repeated traversal
   // on nested fragments
-  $fs?: Anchor
+  $fe?: Anchor
 }
 
-const isComment = (node: Node, data: string): node is Anchor =>
+export const isComment = (node: Node, data: string): node is Anchor =>
   node.nodeType === 8 && (node as Comment).data === data
 
+export function setCurrentHydrationNode(node: Node | null): void {
+  currentHydrationNode = node
+}
+
+function locateNextSiblingOfParent(n: Node): Node | null {
+  if (!n.parentNode) return null
+  return n.parentNode.nextSibling || locateNextSiblingOfParent(n.parentNode)
+}
+
+export function advanceHydrationNode(
+  node: Node & { $pns?: Node | null },
+): void {
+  // if no next sibling, find the next node in the parent chain
+  const ret =
+    _next(node) ||
+    // pns is short for "parent next sibling"
+    node.$pns ||
+    (node.$pns = locateNextSiblingOfParent(node))
+  if (ret) setCurrentHydrationNode(ret)
+}
+
 /**
  * Locate the first non-fragment-comment node and locate the next node
  * while handling potential fragments.
  */
 function adoptTemplateImpl(node: Node, template: string): Node | null {
   if (!(template[0] === '<' && template[1] === '!')) {
-    while (node.nodeType === 8) node = next(node)
-  }
+    while (node.nodeType === 8) {
+      node = _next(node)
 
-  if (__DEV__) {
-    const type = node.nodeType
-    if (
-      (type === 8 && !template.startsWith('<!')) ||
-      (type === 1 &&
-        !template.startsWith(`<` + (node as Element).tagName.toLowerCase())) ||
-      (type === 3 &&
-        template.trim() &&
-        !template.startsWith((node as Text).data))
-    ) {
-      // TODO recover and provide more info
-      warn(`adopted: `, node)
-      warn(`template: ${template}`)
-      warn('hydration mismatch!')
+      // empty text node in slot
+      if (
+        template.trim() === '' &&
+        isComment(node, ']') &&
+        isComment(node.previousSibling!, '[')
+      ) {
+        const parent = parentNode(node)!
+        node = parent.insertBefore(createTextNode(), node)
+        incrementIndexOffset(parent)
+        break
+      }
     }
   }
 
-  currentHydrationNode = next(node)
+  const type = node.nodeType
+  if (
+    // comment node
+    (type === 8 && !template.startsWith('<!')) ||
+    // element node
+    (type === 1 &&
+      !template.startsWith(`<` + (node as Element).tagName.toLowerCase()))
+  ) {
+    node = handleMismatch(node, template)
+  }
+
+  advanceHydrationNode(node)
   return node
 }
 
-function locateHydrationNodeImpl() {
+function locateHydrationNodeImpl(): void {
   let node: Node | null
-
-  // prepend / firstChild
-  if (insertionAnchor === 0) {
-    node = child(insertionParent!)
-  } else {
-    node = insertionAnchor
-      ? insertionAnchor.previousSibling
-      : insertionParent
-        ? insertionParent.lastChild
-        : currentHydrationNode
-
-    if (node && isComment(node, ']')) {
-      // fragment backward search
-      if (node.$fs) {
-        // already cached matching fragment start
-        node = node.$fs
+  let idxMap: number[] | undefined
+  if (insertionAnchor !== undefined && (idxMap = insertionParent!.$idxMap)) {
+    const {
+      $prevDynamicCount: prevDynamicCount = 0,
+      $appendIndex: appendIndex,
+      $indexOffset: indexOffset = 0,
+      $anchorCount: anchorCount = 0,
+    } = insertionParent!
+    // prepend
+    if (insertionAnchor === 0) {
+      // use prevDynamicCount as logical index to locate the hydration node
+      const realIndex = idxMap![prevDynamicCount] + indexOffset
+      node = insertionParent!.childNodes[realIndex]
+    }
+    // insert
+    else if (insertionAnchor instanceof Node) {
+      // handling insertion anchors:
+      // 1. first encounter: use insertionAnchor itself as the hydration node
+      // 2. subsequent: use node following the insertionAnchor as the hydration node
+      // used count tracks how many times insertionAnchor has been used, ensuring
+      // consecutive insert operations locate the correct hydration node.
+      let { $idx, $uc: usedCount } = insertionAnchor as ChildItem
+      if (usedCount !== undefined) {
+        const realIndex = idxMap![$idx + usedCount + 1] + indexOffset
+        node = insertionParent!.childNodes[realIndex]
+        usedCount++
+      } else {
+        node = insertionAnchor
+        // first use of this anchor: it doesn't consume the next child
+        // so we track unique anchor appearances for later offset correction
+        insertionParent!.$anchorCount = anchorCount + 1
+        usedCount = 0
+      }
+      ;(insertionAnchor as ChildItem).$uc = usedCount
+    }
+    // append
+    else {
+      let realIndex: number
+      if (appendIndex !== null && appendIndex !== undefined) {
+        realIndex = idxMap![appendIndex + 1] + indexOffset
+        node = insertionParent!.childNodes[realIndex]
       } else {
-        let cur: Node | null = node
-        let curFragEnd = node
-        let fragDepth = 0
-        node = null
-        while (cur) {
-          cur = cur.previousSibling
-          if (cur) {
-            if (isComment(cur, '[')) {
-              curFragEnd.$fs = cur
-              if (!fragDepth) {
-                node = cur
-                break
-              } else {
-                fragDepth--
-              }
-            } else if (isComment(cur, ']')) {
-              curFragEnd = cur
-              fragDepth++
-            }
-          }
+        if (insertionAnchor === null) {
+          // insertionAnchor is null, indicates no previous static nodes
+          // use the first child as hydration node
+          realIndex = idxMap![0] + indexOffset
+          node = insertionParent!.childNodes[realIndex]
+        } else {
+          // insertionAnchor is a number > 0
+          // indicates how many static nodes precede the node to append
+          // use it as index to locate the hydration node
+          realIndex = idxMap![prevDynamicCount + insertionAnchor] + indexOffset
+          node = insertionParent!.childNodes[realIndex]
         }
       }
+      insertionParent!.$appendIndex = (node as ChildItem).$idx
+    }
+
+    insertionParent!.$prevDynamicCount = prevDynamicCount + 1
+  } else {
+    node = currentHydrationNode
+    if (insertionParent && (!node || node.parentNode !== insertionParent)) {
+      node = insertionParent.firstChild
     }
   }
 
@@ -127,3 +217,99 @@ function locateHydrationNodeImpl() {
   resetInsertionState()
   currentHydrationNode = node
 }
+
+export function locateEndAnchor(
+  node: Anchor,
+  open = '[',
+  close = ']',
+): Node | null {
+  // already cached matching end
+  if (node.$fe) {
+    return node.$fe
+  }
+
+  const stack: Anchor[] = [node]
+  while ((node = _next(node) as Anchor) && stack.length > 0) {
+    if (node.nodeType === 8) {
+      if (node.data === open) {
+        stack.push(node)
+      } else if (node.data === close) {
+        const matchingOpen = stack.pop()!
+        matchingOpen.$fe = node
+        if (stack.length === 0) return node
+      }
+    }
+  }
+
+  return null
+}
+
+export function locateFragmentEndAnchor(label: string = ']'): Comment | null {
+  let node = currentHydrationNode!
+  while (node) {
+    if (isComment(node, label)) return node
+    node = node.nextSibling!
+  }
+  return null
+}
+
+function handleMismatch(node: Node, template: string): Node {
+  if (!isMismatchAllowed(node.parentElement!, MismatchTypes.CHILDREN)) {
+    ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+      warn(
+        `Hydration node mismatch:\n- rendered on server:`,
+        node,
+        node.nodeType === 3
+          ? `(text)`
+          : isComment(node, '[[')
+            ? `(start of block node)`
+            : ``,
+        `\n- expected on client:`,
+        template,
+      )
+    logMismatchError()
+  }
+
+  // fragment
+  if (isComment(node, '[')) {
+    const end = locateEndAnchor(node as Anchor)
+    while (true) {
+      const next = _next(node)
+      if (next && next !== end) {
+        remove(next, parentNode(node)!)
+      } else {
+        break
+      }
+    }
+  }
+
+  const next = _next(node)
+  const container = parentNode(node)!
+  remove(node, container)
+
+  // fast path for text nodes
+  if (template[0] !== '<') {
+    return container.insertBefore(createTextNode(template), next)
+  }
+
+  // element node
+  const t = createElement('template') as HTMLTemplateElement
+  t.innerHTML = template
+  const newNode = child(t.content).cloneNode(true) as Element
+  newNode.innerHTML = (node as Element).innerHTML
+  Array.from((node as Element).attributes).forEach(attr => {
+    newNode.setAttribute(attr.name, attr.value)
+  })
+  container.insertBefore(newNode, next)
+  return newNode
+}
+
+let hasLoggedMismatchError = false
+export const logMismatchError = (): void => {
+  if (__TEST__ || hasLoggedMismatchError) {
+    return
+  }
+  // this error should show up in production
+  console.error('Hydration completed but contains mismatches.')
+  hasLoggedMismatchError = true
+}
diff --git a/packages/runtime-vapor/src/dom/node.ts b/packages/runtime-vapor/src/dom/node.ts
index 83bc32c57f0..b5f6b270d37 100644
--- a/packages/runtime-vapor/src/dom/node.ts
+++ b/packages/runtime-vapor/src/dom/node.ts
@@ -1,29 +1,168 @@
-/*! #__NO_SIDE_EFFECTS__ */
+/* @__NO_SIDE_EFFECTS__ */
+
+import type { ChildItem, InsertionParent } from '../insertionState'
+
+export function createElement(tagName: string): HTMLElement {
+  return document.createElement(tagName)
+}
+
+/* @__NO_SIDE_EFFECTS__ */
 export function createTextNode(value = ''): Text {
   return document.createTextNode(value)
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
+/* @__NO_SIDE_EFFECTS__ */
 export function createComment(data: string): Comment {
   return document.createComment(data)
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
+/* @__NO_SIDE_EFFECTS__ */
 export function querySelector(selectors: string): Element | null {
   return document.querySelector(selectors)
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
-export function child(node: ParentNode): Node {
-  return node.firstChild!
+/*! @__NO_SIDE_EFFECTS__ */
+export function parentNode(node: Node): ParentNode | null {
+  return node.parentNode
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+const _txt: typeof _child = _child
+
+/**
+ * Hydration-specific version of `child`.
+ */
+/* @__NO_SIDE_EFFECTS__ */
+const __txt: typeof __child = (node: ParentNode): Node => {
+  let n = node.firstChild!
+
+  // since SSR doesn't generate whitespace placeholder text nodes, if firstChild
+  // is null, manually insert a text node as the first child
+  if (!n) {
+    return node.appendChild(createTextNode())
+  }
+
+  return n
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+export function _child(node: InsertionParent): Node {
+  const children = node.$children
+  return children ? children[0] : node.firstChild!
+}
+
+/**
+ * Hydration-specific version of `child`.
+ */
+/* @__NO_SIDE_EFFECTS__ */
+export function __child(node: ParentNode): Node {
+  return __nthChild(node, 0)!
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+export function _nthChild(node: InsertionParent, i: number): Node {
+  const children = node.$children
+  return children ? children[i] : node.childNodes[i]
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
-export function nthChild(node: Node, i: number): Node {
+/**
+ * Hydration-specific version of `nthChild`.
+ */
+/* @__NO_SIDE_EFFECTS__ */
+export function __nthChild(node: Node, i: number): Node {
+  const parent = node as InsertionParent
+  if (parent.$idxMap) {
+    const {
+      $prevDynamicCount: prevDynamicCount = 0,
+      $anchorCount: anchorCount = 0,
+      $idxMap: idxMap,
+      $indexOffset: indexOffset = 0,
+    } = parent
+    // prevDynamicCount tracks how many dynamic nodes have been processed
+    // so far (prepend/insert/append).
+    // For anchor-based insert, the first time an anchor is used we adopt the
+    // anchor node itself and do NOT consume the next child in `idxMap`,
+    // yet prevDynamicCount is still incremented. This overcounts the base
+    // offset by 1 per unique anchor that has appeared.
+    // anchorCount equals the number of unique anchors seen, so we
+    // subtract it to neutralize those "first-use doesn't consume" cases:
+    //   base = prevDynamicCount - anchorCount
+    // Then index from this base: idxMap[base + i] + indexOffset.
+    const logicalIndex = prevDynamicCount - anchorCount + i
+    const realIndex = idxMap[logicalIndex] + indexOffset
+    return node.childNodes[realIndex]
+  }
   return node.childNodes[i]
 }
 
-/*! #__NO_SIDE_EFFECTS__ */
-export function next(node: Node): Node {
+/* @__NO_SIDE_EFFECTS__ */
+export function _next(node: Node): Node {
+  const children = (node.parentNode! as InsertionParent).$children
+  return children ? children[(node as ChildItem).$idx + 1] : node.nextSibling!
+}
+
+/**
+ * Hydration-specific version of `next`.
+ */
+/* @__NO_SIDE_EFFECTS__ */
+export function __next(node: Node): Node {
+  const parent = node.parentNode! as InsertionParent
+  if (parent.$idxMap) {
+    const { $idxMap: idxMap, $indexOffset: indexOffset = 0 } = parent
+    const { $idx, $uc: usedCount = 0 } = node as ChildItem
+    const logicalIndex = $idx + usedCount + 1
+    const realIndex = idxMap[logicalIndex] + indexOffset
+    return node.parentNode!.childNodes[realIndex]
+  }
   return node.nextSibling!
 }
+
+type DelegatedFunction<T extends (...args: any[]) => any> = T & {
+  impl: T
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+export const txt: DelegatedFunction<typeof _txt> = node => {
+  return txt.impl(node)
+}
+txt.impl = _child
+
+/* @__NO_SIDE_EFFECTS__ */
+export const child: DelegatedFunction<typeof _child> = node => {
+  return child.impl(node)
+}
+child.impl = _child
+
+/* @__NO_SIDE_EFFECTS__ */
+export const next: DelegatedFunction<typeof _next> = node => {
+  return next.impl(node)
+}
+next.impl = _next
+
+/* @__NO_SIDE_EFFECTS__ */
+export const nthChild: DelegatedFunction<typeof _nthChild> = (node, i) => {
+  return nthChild.impl(node, i)
+}
+nthChild.impl = _nthChild
+
+/**
+ * Enables hydration-specific node lookup behavior.
+ *
+ * Temporarily switches the implementations of the exported
+ * `txt`, `child`, `next`, and `nthChild` functions to their hydration-specific
+ * versions (`__txt`, `__child`, `__next`, `__nthChild`). This allows traversal
+ * logic to correctly handle SSR comment anchors during hydration.
+ */
+export function enableHydrationNodeHelper(): void {
+  txt.impl = __txt
+  child.impl = __child
+  next.impl = __next
+  nthChild.impl = __nthChild
+}
+
+export function disableHydrationNodeHelper(): void {
+  txt.impl = _txt
+  child.impl = _child
+  next.impl = _next
+  nthChild.impl = _nthChild
+}
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index 3b663da7715..1137f049c46 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -6,20 +6,32 @@ import {
   normalizeClass,
   normalizeStyle,
   parseStringStyle,
+  stringifyStyle,
   toDisplayString,
 } from '@vue/shared'
 import { on } from './event'
 import {
+  MismatchTypes,
   currentInstance,
+  getAttributeMismatch,
+  isMapEqual,
+  isMismatchAllowed,
+  isSetEqual,
+  isValidHtmlOrSvgAttribute,
   mergeProps,
   patchStyle,
   shouldSetAsProp,
+  toClassSet,
+  toStyleMap,
+  vShowHidden,
   warn,
+  warnPropMismatch,
 } from '@vue/runtime-dom'
 import {
   type VaporComponentInstance,
   isApplyingFallthroughProps,
 } from '../component'
+import { isHydrating, logMismatchError } from './hydration'
 
 type TargetElement = Element & {
   $root?: true
@@ -57,6 +69,15 @@ export function setAttr(el: any, key: string, value: any): void {
     ;(el as any)._falseValue = value
   }
 
+  if (
+    (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+    isHydrating &&
+    !attributeHasMismatch(el, key, value)
+  ) {
+    el[`$${key}`] = value
+    return
+  }
+
   if (value !== el[`$${key}`]) {
     el[`$${key}`] = value
     if (value != null) {
@@ -72,6 +93,14 @@ export function setDOMProp(el: any, key: string, value: any): void {
     return
   }
 
+  if (
+    (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+    isHydrating &&
+    !attributeHasMismatch(el, key, value)
+  ) {
+    return
+  }
+
   const prev = el[key]
   if (value === prev) {
     return
@@ -112,15 +141,38 @@ export function setDOMProp(el: any, key: string, value: any): void {
 export function setClass(el: TargetElement, value: any): void {
   if (el.$root) {
     setClassIncremental(el, value)
-  } else if ((value = normalizeClass(value)) !== el.$cls) {
-    el.className = el.$cls = value
+  } else {
+    value = normalizeClass(value)
+    if (
+      (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+      isHydrating &&
+      !classHasMismatch(el, value, false)
+    ) {
+      el.$cls = value
+      return
+    }
+
+    if (value !== el.$cls) {
+      el.className = el.$cls = value
+    }
   }
 }
 
 function setClassIncremental(el: any, value: any): void {
   const cacheKey = `$clsi${isApplyingFallthroughProps ? '$' : ''}`
+  const normalizedValue = normalizeClass(value)
+
+  if (
+    (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+    isHydrating &&
+    !classHasMismatch(el, normalizedValue, true)
+  ) {
+    el[cacheKey] = normalizedValue
+    return
+  }
+
   const prev = el[cacheKey]
-  if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
+  if ((value = el[cacheKey] = normalizedValue) !== prev) {
     const nextList = value.split(/\s+/)
     if (value) {
       el.classList.add(...nextList)
@@ -137,20 +189,36 @@ export function setStyle(el: TargetElement, value: any): void {
   if (el.$root) {
     setStyleIncremental(el, value)
   } else {
-    const prev = el.$sty
-    value = el.$sty = normalizeStyle(value)
-    patchStyle(el, prev, value)
+    const normalizedValue = normalizeStyle(value)
+    if (
+      (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+      isHydrating &&
+      !styleHasMismatch(el, value, normalizedValue, false)
+    ) {
+      el.$sty = normalizedValue
+      return
+    }
+
+    patchStyle(el, el.$sty, (el.$sty = normalizedValue))
   }
 }
 
 function setStyleIncremental(el: any, value: any): NormalizedStyle | undefined {
   const cacheKey = `$styi${isApplyingFallthroughProps ? '$' : ''}`
-  const prev = el[cacheKey]
-  value = el[cacheKey] = isString(value)
+  const normalizedValue = isString(value)
     ? parseStringStyle(value)
     : (normalizeStyle(value) as NormalizedStyle | undefined)
-  patchStyle(el, prev, value)
-  return value
+
+  if (
+    (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+    isHydrating &&
+    !styleHasMismatch(el, value, normalizedValue, true)
+  ) {
+    el[cacheKey] = normalizedValue
+    return
+  }
+
+  patchStyle(el, el[cacheKey], (el[cacheKey] = normalizedValue))
 }
 
 export function setValue(el: TargetElement, value: any): void {
@@ -161,6 +229,15 @@ export function setValue(el: TargetElement, value: any): void {
   // store value as _value as well since
   // non-string values will be stringified.
   el._value = value
+
+  if (
+    (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+    isHydrating &&
+    !attributeHasMismatch(el, 'value', getClientText(el, value))
+  ) {
+    return
+  }
+
   // #4956: <option> value will fallback to its text content so we need to
   // compare against its attribute value instead.
   const oldValue = el.tagName === 'OPTION' ? el.getAttribute('value') : el.value
@@ -179,6 +256,23 @@ export function setValue(el: TargetElement, value: any): void {
  * `toDisplayString`
  */
 export function setText(el: Text & { $txt?: string }, value: string): void {
+  if (isHydrating) {
+    const clientText = getClientText(el.parentNode!, value)
+    if (el.nodeValue == clientText) {
+      el.$txt = clientText
+      return
+    }
+
+    ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+      warn(
+        `Hydration text mismatch in`,
+        el.parentNode,
+        `\n  - rendered on server: ${JSON.stringify((el as Text).data)}` +
+          `\n  - expected on client: ${JSON.stringify(value)}`,
+      )
+    logMismatchError()
+  }
+
   if (el.$txt !== value) {
     el.nodeValue = el.$txt = value
   }
@@ -191,13 +285,34 @@ export function setElementText(
   el: Node & { $txt?: string },
   value: unknown,
 ): void {
-  if (el.$txt !== (value = toDisplayString(value))) {
+  value = toDisplayString(value)
+  if (isHydrating) {
+    let clientText = getClientText(el, value as string)
+    if (el.textContent === clientText) {
+      el.$txt = clientText
+      return
+    }
+
+    if (!isMismatchAllowed(el as Element, MismatchTypes.TEXT)) {
+      ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+        warn(
+          `Hydration text content mismatch on`,
+          el,
+          `\n  - rendered on server: ${el.textContent}` +
+            `\n  - expected on client: ${clientText}`,
+        )
+      logMismatchError()
+    }
+  }
+
+  if (el.$txt !== value) {
     el.textContent = el.$txt = value as string
   }
 }
 
 export function setHtml(el: TargetElement, value: any): void {
   value = value == null ? '' : value
+
   if (el.$html !== value) {
     el.innerHTML = el.$html = value
   }
@@ -269,7 +384,9 @@ export function optimizePropertyLookup(): void {
   if (isOptimized) return
   isOptimized = true
   const proto = Element.prototype as any
-  proto.$anchor = proto.$evtclick = undefined
+  proto.$evtclick = undefined
+  proto.$children = undefined
+  proto.$idx = undefined
   proto.$root = false
   proto.$html =
     proto.$txt =
@@ -278,3 +395,94 @@ export function optimizePropertyLookup(): void {
     (Text.prototype as any).$txt =
       ''
 }
+
+function classHasMismatch(
+  el: TargetElement | any,
+  expected: string,
+  isIncremental: boolean,
+): boolean {
+  const actual = el.getAttribute('class')
+  const actualClassSet = toClassSet(actual || '')
+  const expectedClassSet = toClassSet(expected)
+
+  let hasMismatch: boolean = false
+  if (isIncremental) {
+    if (expected) {
+      hasMismatch = Array.from(expectedClassSet).some(
+        cls => !actualClassSet.has(cls),
+      )
+    }
+  } else {
+    hasMismatch = !isSetEqual(actualClassSet, expectedClassSet)
+  }
+
+  if (hasMismatch) {
+    warnPropMismatch(el, 'class', MismatchTypes.CLASS, actual, expected)
+    logMismatchError()
+    return true
+  }
+
+  return false
+}
+
+function styleHasMismatch(
+  el: TargetElement | any,
+  value: any,
+  normalizedValue: string | NormalizedStyle | undefined,
+  isIncremental: boolean,
+): boolean {
+  const actual = el.getAttribute('style')
+  const actualStyleMap = toStyleMap(actual || '')
+  const expected = isString(value) ? value : stringifyStyle(normalizedValue)
+  const expectedStyleMap = toStyleMap(expected)
+
+  // If `v-show=false`, `display: 'none'` should be added to expected
+  if (el[vShowHidden]) {
+    expectedStyleMap.set('display', 'none')
+  }
+
+  // TODO: handle css vars
+
+  let hasMismatch: boolean = false
+  if (isIncremental) {
+    if (expected) {
+      // check if the expected styles are present in the actual styles
+      hasMismatch = Array.from(expectedStyleMap.entries()).some(
+        ([key, val]) => actualStyleMap.get(key) !== val,
+      )
+    }
+  } else {
+    hasMismatch = !isMapEqual(actualStyleMap, expectedStyleMap)
+  }
+
+  if (hasMismatch) {
+    warnPropMismatch(el, 'style', MismatchTypes.STYLE, actual, expected)
+    logMismatchError()
+    return true
+  }
+
+  return false
+}
+
+function attributeHasMismatch(el: any, key: string, value: any): boolean {
+  if (isValidHtmlOrSvgAttribute(el, key)) {
+    const { actual, expected } = getAttributeMismatch(el, key, value)
+    if (actual !== expected) {
+      warnPropMismatch(el, key, MismatchTypes.ATTRIBUTE, actual, expected)
+      logMismatchError()
+      return true
+    }
+  }
+  return false
+}
+
+function getClientText(el: Node, value: string): string {
+  if (
+    value[0] === '\n' &&
+    ((el as Element).tagName === 'PRE' ||
+      (el as Element).tagName === 'TEXTAREA')
+  ) {
+    value = value.slice(1)
+  }
+  return value
+}
diff --git a/packages/runtime-vapor/src/dom/template.ts b/packages/runtime-vapor/src/dom/template.ts
index b78ca4e52cf..1792a9d8b5e 100644
--- a/packages/runtime-vapor/src/dom/template.ts
+++ b/packages/runtime-vapor/src/dom/template.ts
@@ -1,25 +1,40 @@
 import { adoptTemplate, currentHydrationNode, isHydrating } from './hydration'
-import { child, createTextNode } from './node'
+import { child, createElement, createTextNode } from './node'
 
 let t: HTMLTemplateElement
 
+export let currentTemplateFn: (Function & { $idxMap?: number[] }) | undefined =
+  undefined
+
+export function resetTemplateFn(): void {
+  currentTemplateFn = undefined
+}
+
 /*! #__NO_SIDE_EFFECTS__ */
-export function template(html: string, root?: boolean) {
+export function template(
+  html: string,
+  root?: boolean,
+): () => Node & { $root?: true } {
   let node: Node
-  return (): Node & { $root?: true } => {
+  const fn = () => {
     if (isHydrating) {
+      currentTemplateFn = fn
       if (__DEV__ && !currentHydrationNode) {
         // TODO this should not happen
         throw new Error('No current hydration node')
       }
-      return adoptTemplate(currentHydrationNode!, html)!
+      // do not cache the adopted node in node because it contains child nodes
+      // this avoids duplicate rendering of children
+      const adopted = adoptTemplate(currentHydrationNode!, html)!
+      if (root) (adopted as any).$root = true
+      return adopted
     }
     // fast path for text nodes
     if (html[0] !== '<') {
       return createTextNode(html)
     }
     if (!node) {
-      t = t || document.createElement('template')
+      t = t || createElement('template')
       t.innerHTML = html
       node = child(t.content)
     }
@@ -27,4 +42,5 @@ export function template(html: string, root?: boolean) {
     if (root) (ret as any).$root = true
     return ret
   }
+  return fn
 }
diff --git a/packages/runtime-vapor/src/hmr.ts b/packages/runtime-vapor/src/hmr.ts
index c96c1afa130..60b403a3adc 100644
--- a/packages/runtime-vapor/src/hmr.ts
+++ b/packages/runtime-vapor/src/hmr.ts
@@ -22,7 +22,7 @@ export function hmrRerender(instance: VaporComponentInstance): void {
   pushWarningContext(instance)
   devRender(instance)
   popWarningContext()
-  setCurrentInstance(...prev)
+  setCurrentInstance.apply(null, prev)
   insert(instance.block, parent, anchor)
 }
 
@@ -41,6 +41,6 @@ export function hmrReload(
     instance.rawSlots,
     instance.isSingleRoot,
   )
-  setCurrentInstance(...prev)
+  setCurrentInstance.apply(null, prev)
   mountComponent(newInstance, parent, anchor)
 }
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 7a8aea5a0d7..e802ebfa69c 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -15,7 +15,7 @@ export {
 export { renderEffect } from './renderEffect'
 export { createSlot } from './componentSlots'
 export { template } from './dom/template'
-export { createTextNode, child, nthChild, next } from './dom/node'
+export { createTextNode, child, nthChild, next, txt } from './dom/node'
 export {
   setText,
   setHtml,
diff --git a/packages/runtime-vapor/src/insertionState.ts b/packages/runtime-vapor/src/insertionState.ts
index 8c66843bd93..fc015c219fd 100644
--- a/packages/runtime-vapor/src/insertionState.ts
+++ b/packages/runtime-vapor/src/insertionState.ts
@@ -1,5 +1,29 @@
-export let insertionParent: ParentNode | undefined
-export let insertionAnchor: Node | 0 | undefined
+import { isComment, isHydrating } from './dom/hydration'
+import { currentTemplateFn, resetTemplateFn } from './dom/template'
+export type ChildItem = ChildNode & {
+  $idx: number
+  // used count as an anchor
+  $uc?: number
+}
+
+export type InsertionParent = ParentNode & {
+  $children?: ChildItem[]
+  /**
+   * hydration-specific properties
+   */
+  // mapping from logical index to real index in childNodes
+  $idxMap?: number[]
+  // hydrated dynamic children count so far
+  $prevDynamicCount?: number
+  // number of unique insertion anchors that have appeared
+  $anchorCount?: number
+  // last append index
+  $appendIndex?: number | null
+  // number of dynamically inserted nodes (e.g., comment anchors)
+  $indexOffset?: number
+}
+export let insertionParent: InsertionParent | undefined
+export let insertionAnchor: Node | 0 | undefined | null
 
 /**
  * This function is called before a block type that requires insertion
@@ -7,21 +31,127 @@ export let insertionAnchor: Node | 0 | undefined
  * insertion on client-side render, and used for node adoption during hydration.
  */
 export function setInsertionState(
-  parent: ParentNode & { $anchor?: Node | null },
-  anchor?: Node | 0,
+  parent: ParentNode,
+  anchor?: Node | 0 | null | number,
 ): void {
-  // When setInsertionState(n3, 0) is called consecutively, the first prepend operation
-  // uses parent.firstChild as the anchor. However, after insertion, parent.firstChild
-  // changes and cannot serve as the anchor for subsequent prepends. Therefore, we cache
-  // the original parent.firstChild on the first call for subsequent prepend operations.
-  if (anchor === 0 && !parent.$anchor) {
-    parent.$anchor = parent.firstChild
+  insertionParent = parent
+
+  if (anchor !== undefined) {
+    if (isHydrating) {
+      insertionAnchor = anchor as Node
+      initializeHydrationState(parent)
+      resetTemplateFn()
+    } else {
+      // special handling append anchor value to null
+      insertionAnchor =
+        typeof anchor === 'number' && anchor > 0 ? null : (anchor as Node)
+      cacheTemplateChildren(parent)
+    }
+  } else {
+    insertionAnchor = undefined
   }
+}
 
-  insertionParent = parent
-  insertionAnchor = anchor
+function initializeHydrationState(parent: InsertionParent) {
+  if (!parent.$idxMap) {
+    const childNodes = parent.childNodes
+    const len = childNodes.length
+
+    // fast path for single child case. use first child as hydration node
+    // no need to build logical index map
+    if (
+      len === 1 ||
+      (len === 3 &&
+        isComment(childNodes[0], '[') &&
+        isComment(childNodes[2], ']'))
+    ) {
+      insertionAnchor = undefined
+      return
+    }
+
+    if (currentTemplateFn) {
+      if (currentTemplateFn.$idxMap) {
+        const idxMap = (parent.$idxMap = currentTemplateFn.$idxMap)
+        // set $idx to childNodes
+        for (let i = 0; i < idxMap.length; i++) {
+          ;(childNodes[idxMap[i]] as ChildItem).$idx = i
+        }
+      } else {
+        parent.$idxMap = currentTemplateFn.$idxMap = buildLogicalIndexMap(
+          len,
+          childNodes,
+        )
+      }
+    } else {
+      parent.$idxMap = buildLogicalIndexMap(len, childNodes)
+    }
+    parent.$prevDynamicCount = 0
+    parent.$anchorCount = 0
+    parent.$appendIndex = null
+    parent.$indexOffset = 0
+  }
+}
+
+function buildLogicalIndexMap(len: number, childNodes: NodeListOf<ChildNode>) {
+  const idxMap = new Array() as number[]
+  // Build logical index map:
+  // - static node: map logical index to real index
+  // - fragment: map logical index to start anchor's real index
+  let logicalIndex = 0
+  for (let i = 0; i < len; i++) {
+    const n = childNodes[i] as ChildItem
+    n.$idx = logicalIndex
+    if (n.nodeType === 8) {
+      const data = (n as any as Comment).data
+      // vdom fragment
+      if (data === '[') {
+        idxMap[logicalIndex++] = i
+        // find matching end anchor, accounting for nested fragments
+        let depth = 1
+        let j = i + 1
+        for (; j < len; j++) {
+          const c = childNodes[j] as Comment
+          if (c.nodeType === 8) {
+            const d = c.data
+            if (d === '[') depth++
+            else if (d === ']') {
+              depth--
+              if (depth === 0) break
+            }
+          }
+        }
+        // jump i to the end anchor
+        i = j
+        continue
+      }
+    }
+    idxMap[logicalIndex++] = i
+  }
+  return idxMap
+}
+
+function cacheTemplateChildren(parent: InsertionParent) {
+  if (!parent.$children) {
+    const nodes = parent.childNodes
+    const len = nodes.length
+    if (len === 0) return
+
+    const children = new Array(len) as ChildItem[]
+    for (let i = 0; i < len; i++) {
+      const node = nodes[i] as ChildItem
+      node.$idx = i
+      children[i] = node
+    }
+    parent.$children = children
+  }
 }
 
 export function resetInsertionState(): void {
   insertionParent = insertionAnchor = undefined
 }
+
+export function incrementIndexOffset(parent: InsertionParent): void {
+  if (parent.$indexOffset !== undefined) {
+    parent.$indexOffset++
+  }
+}
diff --git a/packages/runtime-vapor/src/renderEffect.ts b/packages/runtime-vapor/src/renderEffect.ts
index ac34e8863d2..feee3c39e62 100644
--- a/packages/runtime-vapor/src/renderEffect.ts
+++ b/packages/runtime-vapor/src/renderEffect.ts
@@ -68,7 +68,7 @@ class RenderEffect extends ReactiveEffect {
     } else {
       this.render()
     }
-    setCurrentInstance(...prev)
+    setCurrentInstance.apply(null, prev)
     if (__DEV__ && instance) {
       startMeasure(instance, `renderEffect`)
     }
diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index adc54526175..34d87a4651b 100644
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/packages/runtime-vapor/src/vdomInterop.ts
@@ -2,6 +2,8 @@ import {
   type App,
   type ComponentInternalInstance,
   type ConcreteComponent,
+  Fragment,
+  type HydrationRenderer,
   MoveType,
   type Plugin,
   type RendererInternals,
@@ -12,8 +14,11 @@ import {
   createInternalObject,
   createVNode,
   currentInstance,
+  ensureHydrationRenderer,
   ensureRenderer,
   isEmitListener,
+  isRef,
+  isVNode,
   onScopeDispose,
   renderSlot,
   shallowReactive,
@@ -26,6 +31,7 @@ import {
   type VaporComponent,
   VaporComponentInstance,
   createComponent,
+  isVaporComponent,
   mountComponent,
   unmountComponent,
 } from './component'
@@ -34,8 +40,18 @@ import { EMPTY_OBJ, extend, isFunction } from '@vue/shared'
 import { type RawProps, rawPropsProxyHandlers } from './componentProps'
 import type { RawSlots, VaporSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
-import { createTextNode } from './dom/node'
+import { _next, createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
+import {
+  advanceHydrationNode,
+  currentHydrationNode,
+  isComment,
+  isHydrating,
+  locateFragmentEndAnchor,
+  locateHydrationNode,
+  setCurrentHydrationNode,
+  hydrateNode as vaporHydrateNode,
+} from './dom/hydration'
 
 export const interopKey: unique symbol = Symbol(`interop`)
 
@@ -45,7 +61,7 @@ const vaporInteropImpl: Omit<
   'vdomMount' | 'vdomUnmount' | 'vdomSlot'
 > = {
   mount(vnode, container, anchor, parentComponent) {
-    const selfAnchor = (vnode.el = vnode.anchor = createTextNode())
+    let selfAnchor = (vnode.el = vnode.anchor = createTextNode())
     container.insertBefore(selfAnchor, anchor)
     const prev = currentInstance
     simpleSetCurrentInstance(parentComponent)
@@ -67,6 +83,8 @@ const vaporInteropImpl: Omit<
       {
         _: slotsRef, // pass the slots ref
       } as any as RawSlots,
+      undefined,
+      (parentComponent ? parentComponent.appContext : vnode.appContext) as any,
     ))
     instance.rawPropsRef = propsRef
     instance.rawSlotsRef = slotsRef
@@ -123,6 +141,27 @@ const vaporInteropImpl: Omit<
     insert(vnode.vb || (vnode.component as any), container, anchor)
     insert(vnode.anchor as any, container, anchor)
   },
+
+  hydrate(vnode, node, container, anchor, parentComponent) {
+    vaporHydrateNode(node, () =>
+      this.mount(vnode, container, anchor, parentComponent),
+    )
+    return _next(node)
+  },
+  hydrateSlot(vnode, node) {
+    const { slot } = vnode.vs!
+    const propsRef = (vnode.vs!.ref = shallowRef(vnode.props))
+    vaporHydrateNode(node, () => {
+      vnode.vb = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler))
+      vnode.el = currentHydrationNode!
+      vnode.anchor = locateFragmentEndAnchor()
+
+      if (__DEV__ && !vnode.anchor) {
+        throw new Error(`Failed to locate slot anchor`)
+      }
+    })
+    return _next(vnode.anchor as Node)
+  },
 }
 
 const vaporSlotPropsProxyHandler: ProxyHandler<
@@ -149,6 +188,8 @@ const vaporSlotsProxyHandler: ProxyHandler<any> = {
   },
 }
 
+let vdomHydrateNode: HydrationRenderer['hydrateNode'] | undefined
+
 /**
  * Mount vdom component in vapor
  */
@@ -193,7 +234,16 @@ function createVDOMComponent(
     internals.umt(vnode.component!, null, !!parentNode)
   }
 
+  frag.hydrate = () => {
+    hydrateVNode(vnode, parentInstance as any)
+    onScopeDispose(unmount, true)
+    isMounted = true
+    frag.nodes = [vnode.el as Node]
+  }
+
   frag.insert = (parentNode, anchor) => {
+    if (isHydrating) return
+
     if (!isMounted) {
       internals.mt(
         vnode,
@@ -217,7 +267,7 @@ function createVDOMComponent(
       )
     }
 
-    frag.nodes = vnode.el as Block
+    frag.nodes = [vnode.el as Node]
   }
 
   frag.remove = unmount
@@ -243,37 +293,10 @@ function renderVDOMSlot(
   let oldVNode: VNode | null = null
 
   frag.insert = (parentNode, anchor) => {
+    if (isHydrating) return
+
     if (!isMounted) {
-      renderEffect(() => {
-        const vnode = renderSlot(
-          slotsRef.value,
-          isFunction(name) ? name() : name,
-          props,
-        )
-        if ((vnode.children as any[]).length) {
-          if (fallbackNodes) {
-            remove(fallbackNodes, parentNode)
-            fallbackNodes = undefined
-          }
-          internals.p(
-            oldVNode,
-            vnode,
-            parentNode,
-            anchor,
-            parentComponent as any,
-          )
-          oldVNode = vnode
-        } else {
-          if (fallback && !fallbackNodes) {
-            // mount fallback
-            if (oldVNode) {
-              internals.um(oldVNode, parentComponent as any, null, true)
-            }
-            insert((fallbackNodes = fallback(props)), parentNode, anchor)
-          }
-          oldVNode = null
-        }
-      })
+      render(parentNode, anchor)
       isMounted = true
     } else {
       // move
@@ -295,6 +318,61 @@ function renderVDOMSlot(
     }
   }
 
+  const render = (parentNode?: ParentNode, anchor?: Node | null) => {
+    renderEffect(() => {
+      const vnode = renderSlot(
+        slotsRef.value,
+        isFunction(name) ? name() : name,
+        props,
+      )
+      if ((vnode.children as any[]).length) {
+        if (isHydrating) {
+          // if slot content is a vnode, hydrate it
+          // otherwise, it's a vapor Block that was already hydrated during
+          // renderSlot
+          if (isVNode(vnode)) {
+            hydrateVNode(vnode!, parentComponent as any)
+          }
+        } else {
+          if (fallbackNodes) {
+            remove(fallbackNodes, parentNode)
+            fallbackNodes = undefined
+          }
+          internals.p(
+            oldVNode,
+            vnode,
+            parentNode!,
+            anchor,
+            parentComponent as any,
+          )
+          oldVNode = vnode
+        }
+      } else {
+        if (fallback && !fallbackNodes) {
+          fallbackNodes = fallback(internals, parentComponent)
+          if (isHydrating) {
+            // hydrate fallback
+            if (isVNode(vnode)) {
+              hydrateVNode(fallbackNodes as any, parentComponent as any)
+            }
+          } else {
+            // mount fallback
+            if (oldVNode) {
+              internals.um(oldVNode, parentComponent as any, null, true)
+            }
+            insert(fallbackNodes, parentNode!, anchor)
+          }
+        }
+        oldVNode = null
+      }
+    })
+  }
+
+  frag.hydrate = () => {
+    render()
+    isMounted = true
+  }
+
   return frag
 }
 
@@ -311,3 +389,38 @@ export const vaporInteropPlugin: Plugin = app => {
     return mount(...args)
   }) satisfies App['mount']
 }
+
+function hydrateVNode(
+  vnode: VNode,
+  parentComponent: ComponentInternalInstance | null,
+) {
+  locateHydrationNode()
+
+  // skip fragment start anchor
+  let node = currentHydrationNode!
+  while (
+    isComment(node, '[') &&
+    // vnode is not a fragment
+    vnode.type !== Fragment &&
+    // not inside vdom slot
+    !(
+      isVaporComponent(parentComponent) &&
+      isRef((parentComponent as VaporComponentInstance).rawSlots._)
+    )
+  ) {
+    node = node.nextSibling!
+  }
+  if (currentHydrationNode !== node) setCurrentHydrationNode(node)
+
+  if (!vdomHydrateNode) vdomHydrateNode = ensureHydrationRenderer().hydrateNode!
+  const nextNode = vdomHydrateNode(
+    currentHydrationNode!,
+    vnode,
+    parentComponent,
+    null,
+    null,
+    false,
+  )
+  if (nextNode) setCurrentHydrationNode(nextNode)
+  else advanceHydrationNode(node)
+}
diff --git a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
index 0679c82168b..ccca72bd1b6 100644
--- a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
@@ -30,7 +30,7 @@ describe('ssr: dynamic component', () => {
         }),
       ),
     ).toBe(
-      `<div><!--[--><div style=\"display:none;\"><!--[-->hi<!--]--></div><!--]--></div>`,
+      `<div><!--[--><div style="display:none;"><!--[-->hi<!--]--></div><!--]--></div>`,
     )
   })
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index efe0d86a09a..e236ac0bb9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,19 +40,19 @@ importers:
         version: 7.28.2
       '@rollup/plugin-alias':
         specifier: ^5.1.1
-        version: 5.1.1(rollup@4.47.0)
+        version: 5.1.1(rollup@4.45.1)
       '@rollup/plugin-commonjs':
         specifier: ^28.0.6
-        version: 28.0.6(rollup@4.47.0)
+        version: 28.0.6(rollup@4.45.1)
       '@rollup/plugin-json':
         specifier: ^6.1.0
-        version: 6.1.0(rollup@4.47.0)
+        version: 6.1.0(rollup@4.45.1)
       '@rollup/plugin-node-resolve':
         specifier: ^16.0.1
-        version: 16.0.1(rollup@4.47.0)
+        version: 16.0.1(rollup@4.45.1)
       '@rollup/plugin-replace':
         specifier: 5.0.4
-        version: 5.0.4(rollup@4.47.0)
+        version: 5.0.4(rollup@4.45.1)
       '@swc/core':
         specifier: ^1.13.3
         version: 1.13.3
@@ -141,17 +141,17 @@ importers:
         specifier: ^6.0.1
         version: 6.0.1
       rollup:
-        specifier: ^4.46.4
-        version: 4.47.0
+        specifier: 4.45.1
+        version: 4.45.1
       rollup-plugin-dts:
-        specifier: ^6.2.3
-        version: 6.2.3(rollup@4.47.0)(typescript@5.6.3)
+        specifier: 6.2.1
+        version: 6.2.1(rollup@4.45.1)(typescript@5.6.3)
       rollup-plugin-esbuild:
         specifier: ^6.2.1
-        version: 6.2.1(esbuild@0.25.9)(rollup@4.47.0)
+        version: 6.2.1(esbuild@0.25.9)(rollup@4.45.1)
       rollup-plugin-polyfill-node:
         specifier: ^0.13.0
-        version: 0.13.0(rollup@4.47.0)
+        version: 0.13.0(rollup@4.45.1)
       semver:
         specifier: ^7.7.2
         version: 7.7.2
@@ -1200,112 +1200,223 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/rollup-android-arm-eabi@4.45.1':
+    resolution: {integrity: sha512-NEySIFvMY0ZQO+utJkgoMiCAjMrGvnbDLHvcmlA33UXJpYBCvlBEbMMtV837uCkS+plG2umfhn0T5mMAxGrlRA==}
+    cpu: [arm]
+    os: [android]
+
   '@rollup/rollup-android-arm-eabi@4.47.0':
     resolution: {integrity: sha512-Weap5hVbZs/yIvUZcFpAmIso8rLmwkO1LesddNjeX28tIhQkAKjRuVgAJ2xpj8wXTny7IZro9aBIgGov0qsL4A==}
     cpu: [arm]
     os: [android]
 
+  '@rollup/rollup-android-arm64@4.45.1':
+    resolution: {integrity: sha512-ujQ+sMXJkg4LRJaYreaVx7Z/VMgBBd89wGS4qMrdtfUFZ+TSY5Rs9asgjitLwzeIbhwdEhyj29zhst3L1lKsRQ==}
+    cpu: [arm64]
+    os: [android]
+
   '@rollup/rollup-android-arm64@4.47.0':
     resolution: {integrity: sha512-XcnlqvG5riTJByKX7bZ1ehe48GiF+eNkdnzV0ziLp85XyJ6tLPfhkXHv3e0h3cpZESTQa8IB+ZHhV/r02+8qKw==}
     cpu: [arm64]
     os: [android]
 
+  '@rollup/rollup-darwin-arm64@4.45.1':
+    resolution: {integrity: sha512-FSncqHvqTm3lC6Y13xncsdOYfxGSLnP+73k815EfNmpewPs+EyM49haPS105Rh4aF5mJKywk9X0ogzLXZzN9lA==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rollup/rollup-darwin-arm64@4.47.0':
     resolution: {integrity: sha512-kZzTIzmzAUOKteh688kN88HNaL7wxwTz9XB5dDK94AQdf9nD+lxm/H5uPKQaawUFS+klBEowqPMUPjBRKGbo/g==}
     cpu: [arm64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-x64@4.45.1':
+    resolution: {integrity: sha512-2/vVn/husP5XI7Fsf/RlhDaQJ7x9zjvC81anIVbr4b/f0xtSmXQTFcGIQ/B1cXIYM6h2nAhJkdMHTnD7OtQ9Og==}
+    cpu: [x64]
+    os: [darwin]
+
   '@rollup/rollup-darwin-x64@4.47.0':
     resolution: {integrity: sha512-WaMrgHRbFspYjvycbsbqheBmlsQBLwfZVWv/KFsT212Yz/RjEQ/9KEp1/p0Ef3ZNwbWsylmgf69St66D9NQNHw==}
     cpu: [x64]
     os: [darwin]
 
+  '@rollup/rollup-freebsd-arm64@4.45.1':
+    resolution: {integrity: sha512-4g1kaDxQItZsrkVTdYQ0bxu4ZIQ32cotoQbmsAnW1jAE4XCMbcBPDirX5fyUzdhVCKgPcrwWuucI8yrVRBw2+g==}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@rollup/rollup-freebsd-arm64@4.47.0':
     resolution: {integrity: sha512-umfYslurvSmAK5MEyOcOGooQ6EBB2pYePQaTVlrOkIfG6uuwu9egYOlxr35lwsp6XG0NzmXW0/5o150LUioMkQ==}
     cpu: [arm64]
     os: [freebsd]
 
+  '@rollup/rollup-freebsd-x64@4.45.1':
+    resolution: {integrity: sha512-L/6JsfiL74i3uK1Ti2ZFSNsp5NMiM4/kbbGEcOCps99aZx3g8SJMO1/9Y0n/qKlWZfn6sScf98lEOUe2mBvW9A==}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rollup/rollup-freebsd-x64@4.47.0':
     resolution: {integrity: sha512-EFXhIykAl8//4ihOjGNirF89HEUbOB8ev2aiw8ST8wFGwDdIPARh3enDlbp8aFnScl4CDK4DZLQYXaM6qpxzZw==}
     cpu: [x64]
     os: [freebsd]
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.45.1':
+    resolution: {integrity: sha512-RkdOTu2jK7brlu+ZwjMIZfdV2sSYHK2qR08FUWcIoqJC2eywHbXr0L8T/pONFwkGukQqERDheaGTeedG+rra6Q==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-arm-gnueabihf@4.47.0':
     resolution: {integrity: sha512-EwkC5N61ptruQ9wNkYfLgUWEGh+F3JZSGHkUWhaK2ISAK0d0xmiMKF0trFhRqPQFov5d9DmFiFIhWB5IC79OUA==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-arm-musleabihf@4.45.1':
+    resolution: {integrity: sha512-3kJ8pgfBt6CIIr1o+HQA7OZ9mp/zDk3ctekGl9qn/pRBgrRgfwiffaUmqioUGN9hv0OHv2gxmvdKOkARCtRb8Q==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-linux-arm-musleabihf@4.47.0':
     resolution: {integrity: sha512-Iz/g1X94vIjppA4H9hN3VEedw4ObC+u+aua2J/VPJnENEJ0GeCAPBN15nJc5pS5M8JPlUhOd3oqhOWX6Un4RHA==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-linux-arm64-gnu@4.45.1':
+    resolution: {integrity: sha512-k3dOKCfIVixWjG7OXTCOmDfJj3vbdhN0QYEqB+OuGArOChek22hn7Uy5A/gTDNAcCy5v2YcXRJ/Qcnm4/ma1xw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-arm64-gnu@4.47.0':
     resolution: {integrity: sha512-eYEYHYjFo/vb6k1l5uq5+Af9yuo9WaST/z+/8T5gkee+A0Sfx1NIPZtKMEQOLjm/oaeHFGpWaAO97gTPhouIfQ==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-arm64-musl@4.45.1':
+    resolution: {integrity: sha512-PmI1vxQetnM58ZmDFl9/Uk2lpBBby6B6rF4muJc65uZbxCs0EA7hhKCk2PKlmZKuyVSHAyIw3+/SiuMLxKxWog==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-linux-arm64-musl@4.47.0':
     resolution: {integrity: sha512-LX2x0/RszFEmDfjzL6kG/vihD5CkpJ+0K6lcbqX0jAopkkXeY2ZjStngdFMFW+BK7pyrqryJgy6Jt3+oyDxrSA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-linux-loongarch64-gnu@4.45.1':
+    resolution: {integrity: sha512-9UmI0VzGmNJ28ibHW2GpE2nF0PBQqsyiS4kcJ5vK+wuwGnV5RlqdczVocDSUfGX/Na7/XINRVoUgJyFIgipoRg==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-loongarch64-gnu@4.47.0':
     resolution: {integrity: sha512-0U+56rJmJvqBCwlPFz/BcxkvdiRdNPamBfuFHrOGQtGajSMJ2OqzlvOgwj5vReRQnSA6XMKw/JL1DaBhceil+g==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-powerpc64le-gnu@4.45.1':
+    resolution: {integrity: sha512-7nR2KY8oEOUTD3pBAxIBBbZr0U7U+R9HDTPNy+5nVVHDXI4ikYniH1oxQz9VoB5PbBU1CZuDGHkLJkd3zLMWsg==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-ppc64-gnu@4.47.0':
     resolution: {integrity: sha512-2VKOsnNyvS05HFPKtmAWtef+nZyKCot/V3Jh/A5sYMhUvtthNjp6CjakYTtc5xZ8J8Fp5FKrUWGxptVtZ2OzEA==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-riscv64-gnu@4.45.1':
+    resolution: {integrity: sha512-nlcl3jgUultKROfZijKjRQLUu9Ma0PeNv/VFHkZiKbXTBQXhpytS8CIj5/NfBeECZtY2FJQubm6ltIxm/ftxpw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-riscv64-gnu@4.47.0':
     resolution: {integrity: sha512-uY5UP7YZM4DMQiiP9Fl4/7O3UbT2p3uI0qvqLXZSGWBfyYuqi2DYQ48ExylgBN3T8AJork+b+mLGq6VXsxBfuw==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-riscv64-musl@4.45.1':
+    resolution: {integrity: sha512-HJV65KLS51rW0VY6rvZkiieiBnurSzpzore1bMKAhunQiECPuxsROvyeaot/tcK3A3aGnI+qTHqisrpSgQrpgA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-linux-riscv64-musl@4.47.0':
     resolution: {integrity: sha512-qpcN2+/ivq3TcrXtZoHrS9WZplV3Nieh0gvnGb+SFZg7h/YkWsOXINJnjJRWHp9tEur7T8lMnMeQMPS7s9MjUg==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-linux-s390x-gnu@4.45.1':
+    resolution: {integrity: sha512-NITBOCv3Qqc6hhwFt7jLV78VEO/il4YcBzoMGGNxznLgRQf43VQDae0aAzKiBeEPIxnDrACiMgbqjuihx08OOw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-s390x-gnu@4.47.0':
     resolution: {integrity: sha512-XfuI+o7a2/KA2tBeP+J1CT3siyIQyjpGEL6fFvtUdoHJK1k5iVI3qeGT2i5y6Bb+xQu08AHKBsUGJ2GsOZzXbQ==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-x64-gnu@4.45.1':
+    resolution: {integrity: sha512-+E/lYl6qu1zqgPEnTrs4WysQtvc/Sh4fC2nByfFExqgYrqkKWp1tWIbe+ELhixnenSpBbLXNi6vbEEJ8M7fiHw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-x64-gnu@4.47.0':
     resolution: {integrity: sha512-ylkLO6G7oUiN28mork3caDmgXHqRuopAxjYDaOqs4CoU9pkfR0R/pGQb2V1x2Zg3tlFj4b/DvxZroxC3xALX6g==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-x64-musl@4.45.1':
+    resolution: {integrity: sha512-a6WIAp89p3kpNoYStITT9RbTbTnqarU7D8N8F2CV+4Cl9fwCOZraLVuVFvlpsW0SbIiYtEnhCZBPLoNdRkjQFw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-linux-x64-musl@4.47.0':
     resolution: {integrity: sha512-1L72a+ice8xKqJ2afsAVW9EfECOhNMAOC1jH65TgghLaHSFwNzyEdeye+1vRFDNy52OGKip/vajj0ONtX7VpAg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-win32-arm64-msvc@4.45.1':
+    resolution: {integrity: sha512-T5Bi/NS3fQiJeYdGvRpTAP5P02kqSOpqiopwhj0uaXB6nzs5JVi2XMJb18JUSKhCOX8+UE1UKQufyD6Or48dJg==}
+    cpu: [arm64]
+    os: [win32]
+
   '@rollup/rollup-win32-arm64-msvc@4.47.0':
     resolution: {integrity: sha512-wluhdd1uNLk/S+ex2Yj62WFw3un2cZo2ZKXy9cOuoti5IhaPXSDSvxT3os+SJ1cjNorE1PwAOfiJU7QUH6n3Zw==}
     cpu: [arm64]
     os: [win32]
 
+  '@rollup/rollup-win32-ia32-msvc@4.45.1':
+    resolution: {integrity: sha512-lxV2Pako3ujjuUe9jiU3/s7KSrDfH6IgTSQOnDWr9aJ92YsFd7EurmClK0ly/t8dzMkDtd04g60WX6yl0sGfdw==}
+    cpu: [ia32]
+    os: [win32]
+
   '@rollup/rollup-win32-ia32-msvc@4.47.0':
     resolution: {integrity: sha512-0SMTA6AeG7u2rfwdkKSo6aZD/obmA7oyhR+4ePwLzlwxNE8sfSI9zmjZXtchvBAZmtkVQNt/lZ6RxSl9wBj4pw==}
     cpu: [ia32]
     os: [win32]
 
+  '@rollup/rollup-win32-x64-msvc@4.45.1':
+    resolution: {integrity: sha512-M/fKi4sasCdM8i0aWJjCSFm2qEnYRR8AMLG2kxp6wD13+tMGA4Z1tVAuHkNRjud5SW2EM3naLuK35w9twvf6aA==}
+    cpu: [x64]
+    os: [win32]
+
   '@rollup/rollup-win32-x64-msvc@4.47.0':
     resolution: {integrity: sha512-mw1/7kAGxLcfzoG7DIKFHvKr2ZUQasKOPCgT2ubkNZPgIDZOJPymqThtRWEeAlXBoipehP4BUFpBAZIrPhFg8Q==}
     cpu: [x64]
@@ -3320,8 +3431,8 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  rollup-plugin-dts@6.2.3:
-    resolution: {integrity: sha512-UgnEsfciXSPpASuOelix7m4DrmyQgiaWBnvI0TM4GxuDh5FkqW8E5hu57bCxXB90VvR1WNfLV80yEDN18UogSA==}
+  rollup-plugin-dts@6.2.1:
+    resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==}
     engines: {node: '>=16'}
     peerDependencies:
       rollup: ^3.29.4 || ^4
@@ -3339,6 +3450,11 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
+  rollup@4.45.1:
+    resolution: {integrity: sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
   rollup@4.47.0:
     resolution: {integrity: sha512-jZVxJwlAptA83ftdZK1kjLZfi0f6o+vVX7ub3HaRzkehLO3l4VB4vYpMHyunhBt1sawv9fiRWPA8Qi/sbg9Kcw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -4375,13 +4491,13 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.47.0)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.45.1)':
     optionalDependencies:
-      rollup: 4.47.0
+      rollup: 4.45.1
 
-  '@rollup/plugin-commonjs@28.0.6(rollup@4.47.0)':
+  '@rollup/plugin-commonjs@28.0.6(rollup@4.45.1)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.47.0)
+      '@rollup/pluginutils': 5.2.0(rollup@4.45.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -4389,38 +4505,46 @@ snapshots:
       magic-string: 0.30.17
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.47.0
+      rollup: 4.45.1
 
-  '@rollup/plugin-inject@5.0.5(rollup@4.47.0)':
+  '@rollup/plugin-inject@5.0.5(rollup@4.45.1)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.47.0)
+      '@rollup/pluginutils': 5.2.0(rollup@4.45.1)
       estree-walker: 2.0.2
       magic-string: 0.30.17
     optionalDependencies:
-      rollup: 4.47.0
+      rollup: 4.45.1
 
-  '@rollup/plugin-json@6.1.0(rollup@4.47.0)':
+  '@rollup/plugin-json@6.1.0(rollup@4.45.1)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.47.0)
+      '@rollup/pluginutils': 5.2.0(rollup@4.45.1)
     optionalDependencies:
-      rollup: 4.47.0
+      rollup: 4.45.1
 
-  '@rollup/plugin-node-resolve@16.0.1(rollup@4.47.0)':
+  '@rollup/plugin-node-resolve@16.0.1(rollup@4.45.1)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.47.0)
+      '@rollup/pluginutils': 5.2.0(rollup@4.45.1)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.10
     optionalDependencies:
-      rollup: 4.47.0
+      rollup: 4.45.1
 
-  '@rollup/plugin-replace@5.0.4(rollup@4.47.0)':
+  '@rollup/plugin-replace@5.0.4(rollup@4.45.1)':
     dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.47.0)
+      '@rollup/pluginutils': 5.2.0(rollup@4.45.1)
       magic-string: 0.30.17
     optionalDependencies:
-      rollup: 4.47.0
+      rollup: 4.45.1
+
+  '@rollup/pluginutils@5.2.0(rollup@4.45.1)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.45.1
 
   '@rollup/pluginutils@5.2.0(rollup@4.47.0)':
     dependencies:
@@ -4430,63 +4554,123 @@ snapshots:
     optionalDependencies:
       rollup: 4.47.0
 
+  '@rollup/rollup-android-arm-eabi@4.45.1':
+    optional: true
+
   '@rollup/rollup-android-arm-eabi@4.47.0':
     optional: true
 
+  '@rollup/rollup-android-arm64@4.45.1':
+    optional: true
+
   '@rollup/rollup-android-arm64@4.47.0':
     optional: true
 
+  '@rollup/rollup-darwin-arm64@4.45.1':
+    optional: true
+
   '@rollup/rollup-darwin-arm64@4.47.0':
     optional: true
 
+  '@rollup/rollup-darwin-x64@4.45.1':
+    optional: true
+
   '@rollup/rollup-darwin-x64@4.47.0':
     optional: true
 
+  '@rollup/rollup-freebsd-arm64@4.45.1':
+    optional: true
+
   '@rollup/rollup-freebsd-arm64@4.47.0':
     optional: true
 
+  '@rollup/rollup-freebsd-x64@4.45.1':
+    optional: true
+
   '@rollup/rollup-freebsd-x64@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-arm-gnueabihf@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-arm-musleabihf@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-arm-musleabihf@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-arm64-gnu@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-arm64-gnu@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-arm64-musl@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-arm64-musl@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-loongarch64-gnu@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-loongarch64-gnu@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-powerpc64le-gnu@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-ppc64-gnu@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-gnu@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-gnu@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-musl@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-musl@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-s390x-gnu@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-s390x-gnu@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-x64-gnu@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-x64-gnu@4.47.0':
     optional: true
 
+  '@rollup/rollup-linux-x64-musl@4.45.1':
+    optional: true
+
   '@rollup/rollup-linux-x64-musl@4.47.0':
     optional: true
 
+  '@rollup/rollup-win32-arm64-msvc@4.45.1':
+    optional: true
+
   '@rollup/rollup-win32-arm64-msvc@4.47.0':
     optional: true
 
+  '@rollup/rollup-win32-ia32-msvc@4.45.1':
+    optional: true
+
   '@rollup/rollup-win32-ia32-msvc@4.47.0':
     optional: true
 
+  '@rollup/rollup-win32-x64-msvc@4.45.1':
+    optional: true
+
   '@rollup/rollup-win32-x64-msvc@4.47.0':
     optional: true
 
@@ -6612,29 +6796,55 @@ snapshots:
       glob: 11.0.3
       package-json-from-dist: 1.0.1
 
-  rollup-plugin-dts@6.2.3(rollup@4.47.0)(typescript@5.6.3):
+  rollup-plugin-dts@6.2.1(rollup@4.45.1)(typescript@5.6.3):
     dependencies:
       magic-string: 0.30.17
-      rollup: 4.47.0
+      rollup: 4.45.1
       typescript: 5.6.3
     optionalDependencies:
       '@babel/code-frame': 7.27.1
 
-  rollup-plugin-esbuild@6.2.1(esbuild@0.25.9)(rollup@4.47.0):
+  rollup-plugin-esbuild@6.2.1(esbuild@0.25.9)(rollup@4.45.1):
     dependencies:
       debug: 4.4.1
       es-module-lexer: 1.7.0
       esbuild: 0.25.9
       get-tsconfig: 4.10.1
-      rollup: 4.47.0
+      rollup: 4.45.1
       unplugin-utils: 0.2.5
     transitivePeerDependencies:
       - supports-color
 
-  rollup-plugin-polyfill-node@0.13.0(rollup@4.47.0):
+  rollup-plugin-polyfill-node@0.13.0(rollup@4.45.1):
     dependencies:
-      '@rollup/plugin-inject': 5.0.5(rollup@4.47.0)
-      rollup: 4.47.0
+      '@rollup/plugin-inject': 5.0.5(rollup@4.45.1)
+      rollup: 4.45.1
+
+  rollup@4.45.1:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.45.1
+      '@rollup/rollup-android-arm64': 4.45.1
+      '@rollup/rollup-darwin-arm64': 4.45.1
+      '@rollup/rollup-darwin-x64': 4.45.1
+      '@rollup/rollup-freebsd-arm64': 4.45.1
+      '@rollup/rollup-freebsd-x64': 4.45.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.45.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.45.1
+      '@rollup/rollup-linux-arm64-gnu': 4.45.1
+      '@rollup/rollup-linux-arm64-musl': 4.45.1
+      '@rollup/rollup-linux-loongarch64-gnu': 4.45.1
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.45.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.45.1
+      '@rollup/rollup-linux-riscv64-musl': 4.45.1
+      '@rollup/rollup-linux-s390x-gnu': 4.45.1
+      '@rollup/rollup-linux-x64-gnu': 4.45.1
+      '@rollup/rollup-linux-x64-musl': 4.45.1
+      '@rollup/rollup-win32-arm64-msvc': 4.45.1
+      '@rollup/rollup-win32-ia32-msvc': 4.45.1
+      '@rollup/rollup-win32-x64-msvc': 4.45.1
+      fsevents: 2.3.3
 
   rollup@4.47.0:
     dependencies:
@@ -6661,6 +6871,7 @@ snapshots:
       '@rollup/rollup-win32-ia32-msvc': 4.47.0
       '@rollup/rollup-win32-x64-msvc': 4.47.0
       fsevents: 2.3.3
+    optional: true
 
   rrweb-cssom@0.8.0: {}
 
@@ -7092,7 +7303,7 @@ snapshots:
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
-      rollup: 4.47.0
+      rollup: 4.45.1
     optionalDependencies:
       '@types/node': 22.17.2
       fsevents: 2.3.3
@@ -7104,7 +7315,7 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
-      rollup: 4.47.0
+      rollup: 4.45.1
       tinyglobby: 0.2.14
     optionalDependencies:
       '@types/node': 22.17.2