From aad75fd7c4aecc752b2282d0af40bcdbcc52c239 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 25 Apr 2025 15:08:19 +0800
Subject: [PATCH] wip: refactor

---
 .../__tests__/ssrComponent.spec.ts            |    8 +-
 .../__tests__/ssrFallthroughAttrs.spec.ts     |    2 +-
 .../__tests__/ssrInjectCssVars.spec.ts        |    2 +-
 .../__tests__/ssrSlotOutlet.spec.ts           |    2 +-
 .../__tests__/ssrTransitionGroup.spec.ts      |    4 +-
 .../compiler-ssr/__tests__/ssrVIf.spec.ts     |   24 +-
 .../compiler-ssr/__tests__/ssrVModel.spec.ts  |    2 +-
 .../compiler-ssr/src/ssrCodegenTransform.ts   |   11 +-
 .../src/transforms/ssrTransformComponent.ts   |   11 +-
 .../compiler-ssr/src/transforms/ssrVIf.ts     |    6 +-
 .../runtime-core/__tests__/hydration.spec.ts  |   12 +-
 packages/runtime-core/src/hydration.ts        |   14 +-
 packages/runtime-core/src/index.ts            |    4 -
 .../runtime-vapor/__tests__/hydration.spec.ts | 1211 +++++++++--------
 .../src/apiCreateDynamicComponent.ts          |   13 +-
 packages/runtime-vapor/src/apiCreateIf.ts     |   15 +-
 packages/runtime-vapor/src/block.ts           |   21 +-
 packages/runtime-vapor/src/dom/hydration.ts   |    3 +-
 packages/runtime-vapor/src/dom/node.ts        |   38 +-
 .../__tests__/ssrAttrFallthrough.spec.ts      |    2 +-
 .../__tests__/ssrDynamicComponent.spec.ts     |   14 +-
 .../server-renderer/__tests__/ssrSlot.spec.ts |   14 +-
 packages/server-renderer/src/render.ts        |    1 -
 packages/shared/src/domAnchors.ts             |   30 +
 packages/shared/src/index.ts                  |    1 +
 25 files changed, 760 insertions(+), 705 deletions(-)
 create mode 100644 packages/shared/src/domAnchors.ts

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index 7459cb492..1bae37c0f 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -39,6 +39,7 @@ describe('ssr: components', () => {
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
+          _push(\`<!--dynamic-component-->\`)
         }"
       `)
 
@@ -49,6 +50,7 @@ describe('ssr: components', () => {
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
+          _push(\`<!--dynamic-component-->\`)
         }"
       `)
   })
@@ -245,7 +247,7 @@ describe('ssr: components', () => {
                     _push(\`<span\${_scopeId}></span>\`)
                   })
                   _push(\`<!--]--></div>\`)
-                  _push(\`<!--$-->\`)
+                  _push(\`<!--if-->\`)
                 } else {
                   _push(\`<!---->\`)
                 }
@@ -269,7 +271,7 @@ describe('ssr: components', () => {
                     _push(\`<span\${_scopeId}></span>\`)
                   })
                   _push(\`<!--]--></div>\`)
-                  _push(\`<!--$-->\`)
+                  _push(\`<!--if-->\`)
                 } else {
                   _push(\`<!---->\`)
                 }
@@ -363,7 +365,7 @@ describe('ssr: components', () => {
                   _push(\`\`)
                   if (false) {
                     _push(\`<div\${_scopeId}></div>\`)
-                    _push(\`<!--$-->\`)
+                    _push(\`<!--if-->\`)
                   } else {
                     _push(\`<!---->\`)
                   }
diff --git a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
index a83797900..712c09d09 100644
--- a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
@@ -29,7 +29,7 @@ describe('ssr: attrs fallthrough', () => {
         _push(\`<!--[-->\`)
         if (true) {
           _push(\`<div></div>\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }
diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index 3eef5a777..0666e8949 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -70,7 +70,7 @@ describe('ssr: inject <style vars>', () => {
         const _cssVars = { style: { color: _ctx.color }}
         if (_ctx.ok) {
           _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!--[--><div\${
             _ssrRenderAttrs(_cssVars)
diff --git a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
index 95f48b3b0..4d73dfe08 100644
--- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
@@ -153,7 +153,7 @@ describe('ssr: <slot>', () => {
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (true) {
           _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }
diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index 7111dd5a2..53295fb03 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -54,7 +54,7 @@ describe('transition-group', () => {
         })
         if (false) {
           _push(\`<div></div>\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         }
         _push(\`</ul>\`)
       }"
@@ -124,7 +124,7 @@ describe('transition-group', () => {
         })
         if (_ctx.ok) {
           _push(\`<div>ok</div>\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         }
         _push(\`<!--]-->\`)
       }"
diff --git a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
index d9ee69888..e8909a828 100644
--- a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
@@ -8,7 +8,7 @@ describe('ssr: v-if', () => {
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
           _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }
@@ -24,7 +24,7 @@ describe('ssr: v-if', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
             _push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else {
             _push(\`<!---->\`)
           }
@@ -40,7 +40,7 @@ describe('ssr: v-if', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
             _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else {
             _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
           }
@@ -56,10 +56,10 @@ describe('ssr: v-if', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
             _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else if (_ctx.bar) {
             _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else {
             _push(\`<!---->\`)
           }
@@ -75,10 +75,10 @@ describe('ssr: v-if', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
             _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else if (_ctx.bar) {
             _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else {
             _push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
           }
@@ -93,7 +93,7 @@ describe('ssr: v-if', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
             _push(\`<!--[-->hello<!--]-->\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else {
             _push(\`<!---->\`)
           }
@@ -110,7 +110,7 @@ describe('ssr: v-if', () => {
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           if (_ctx.foo) {
             _push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
-            _push(\`<!--$-->\`)
+            _push(\`<!--if-->\`)
           } else {
             _push(\`<!---->\`)
           }
@@ -127,7 +127,7 @@ describe('ssr: v-if', () => {
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
           _push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }
@@ -148,7 +148,7 @@ describe('ssr: v-if', () => {
             _push(\`<div></div>\`)
           })
           _push(\`<!--]-->\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }
@@ -167,7 +167,7 @@ describe('ssr: v-if', () => {
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
           _push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
         }
diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
index 906c62df2..db4af81d0 100644
--- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
@@ -91,7 +91,7 @@ describe('ssr: v-model', () => {
               ? _ssrLooseContain(_ctx.model, _ctx.i)
               : _ssrLooseEqual(_ctx.model, _ctx.i))) ? " selected" : ""
           }></option>\`)
-          _push(\`<!--$-->\`)
+          _push(\`<!--if-->\`)
         } else {
           _push(\`<!---->\`)
         }
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 8a98c2422..e23240040 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -21,7 +21,12 @@ import {
   isText,
   processExpression,
 } from '@vue/compiler-dom'
-import { escapeHtml, isString } from '@vue/shared'
+import {
+  DYNAMIC_END_ANCHOR_LABEL,
+  DYNAMIC_START_ANCHOR_LABEL,
+  escapeHtml,
+  isString,
+} from '@vue/shared'
 import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
 import { ssrProcessIf } from './transforms/ssrVIf'
 import { ssrProcessFor } from './transforms/ssrVFor'
@@ -161,7 +166,7 @@ export function processChildren(
   asDynamic = false,
 ): void {
   if (asDynamic) {
-    context.pushStringPart(`<!--[[-->`)
+    context.pushStringPart(`<!--${DYNAMIC_START_ANCHOR_LABEL}-->`)
   }
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
@@ -259,7 +264,7 @@ export function processChildren(
     context.pushStringPart(`<!--]-->`)
   }
   if (asDynamic) {
-    context.pushStringPart(`<!--]]-->`)
+    context.pushStringPart(`<!--${DYNAMIC_END_ANCHOR_LABEL}-->`)
   }
 }
 
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index cad1ee810..419c2e4e4 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -55,7 +55,14 @@ import {
   ssrProcessTransitionGroup,
   ssrTransformTransitionGroup,
 } from './ssrTransformTransitionGroup'
-import { extend, isArray, isObject, isPlainObject, isSymbol } from '@vue/shared'
+import {
+  DYNAMIC_COMPONENT_ANCHOR_LABEL,
+  extend,
+  isArray,
+  isObject,
+  isPlainObject,
+  isSymbol,
+} from '@vue/shared'
 import { buildSSRProps } from './ssrTransformElement'
 import {
   ssrProcessTransition,
@@ -264,6 +271,8 @@ export function ssrProcessComponent(
       // dynamic component (`resolveDynamicComponent` call)
       // the codegen node is a `renderVNode` call
       context.pushStatement(node.ssrCodegenNode)
+      // anchor for dynamic component for vapor hydration
+      context.pushStringPart(`<!--${DYNAMIC_COMPONENT_ANCHOR_LABEL}-->`)
     }
   }
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 74ac319f4..811252c0f 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -14,6 +14,7 @@ import {
   type SSRTransformContext,
   processChildrenAsStatement,
 } from '../ssrCodegenTransform'
+import { IF_ANCHOR_LABEL } from '@vue/shared'
 
 // Plugin for the first transform pass, which simply constructs the AST node
 export const ssrTransformIf: NodeTransform = createStructuralDirectiveTransform(
@@ -80,7 +81,10 @@ function processIfBranch(
     needFragmentWrapper,
   )
   if (branch.condition) {
-    statement.body.push(createCallExpression(`_push`, ['`<!--$-->`']))
+    // v-if/v-else-if anchor for vapor hydration
+    statement.body.push(
+      createCallExpression(`_push`, [`\`<!--${IF_ANCHOR_LABEL}-->\``]),
+    )
   }
   return statement
 }
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 9cf6870c4..793c11ced 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -598,14 +598,14 @@ describe('SSR hydration', () => {
     const ctx: SSRContext = {}
     container.innerHTML = await renderToString(h(App), ctx)
     expect(container.innerHTML).toBe(
-      '<div><!--teleport start--><!--teleport end--><!--$--></div>',
+      '<div><!--teleport start--><!--teleport end--><!--if--></div>',
     )
     teleportContainer.innerHTML = ctx.teleports!['#target']
 
     // hydrate
     createSSRApp(App).mount(container)
     expect(container.innerHTML).toBe(
-      '<div><!--teleport start--><!--teleport end--><!--$--></div>',
+      '<div><!--teleport start--><!--teleport end--><!--if--></div>',
     )
     expect(teleportContainer.innerHTML).toBe(
       '<!--teleport start anchor--><span>Teleported Comp1</span><!--teleport anchor-->',
@@ -614,7 +614,7 @@ describe('SSR hydration', () => {
 
     toggle.value = false
     await nextTick()
-    expect(container.innerHTML).toBe('<div><div>Comp2</div><!--$--></div>')
+    expect(container.innerHTML).toBe('<div><div>Comp2</div><!--if--></div>')
     expect(teleportContainer.innerHTML).toBe('')
   })
 
@@ -657,21 +657,21 @@ describe('SSR hydration', () => {
     // server render
     container.innerHTML = await renderToString(h(App))
     expect(container.innerHTML).toBe(
-      '<div><!--teleport start--><!--teleport end--><!--$--></div>',
+      '<div><!--teleport start--><!--teleport end--><!--if--></div>',
     )
     expect(teleportContainer.innerHTML).toBe('')
 
     // hydrate
     createSSRApp(App).mount(container)
     expect(container.innerHTML).toBe(
-      '<div><!--teleport start--><!--teleport end--><!--$--></div>',
+      '<div><!--teleport start--><!--teleport end--><!--if--></div>',
     )
     expect(teleportContainer.innerHTML).toBe('<span>Teleported Comp1</span>')
     expect(`Hydration children mismatch`).toHaveBeenWarned()
 
     toggle.value = false
     await nextTick()
-    expect(container.innerHTML).toBe('<div><div>Comp2</div><!--$--></div>')
+    expect(container.innerHTML).toBe('<div><div>Comp2</div><!--if--></div>')
     expect(teleportContainer.innerHTML).toBe('')
   })
 
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 876fd877e..7c7fdf386 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -25,6 +25,8 @@ import {
   getEscapedCssVarName,
   includeBooleanAttr,
   isBooleanAttr,
+  isDynamicAnchor,
+  isDynamicFragmentEndAnchor,
   isKnownHtmlAttr,
   isKnownSvgAttr,
   isOn,
@@ -84,14 +86,6 @@ const getContainerType = (
   return undefined
 }
 
-export function isDynamicAnchor(node: Node): node is Comment {
-  return isComment(node) && (node.data === '[[' || node.data === ']]')
-}
-
-export function isDynamicFragmentEndAnchor(node: Node): node is Comment {
-  return isComment(node) && node.data === '$'
-}
-
 export const isComment = (node: Node): node is Comment =>
   node.nodeType === DOMNodeTypes.COMMENT
 
@@ -130,8 +124,8 @@ export function createHydrationFunctions(
   function nextSibling(node: Node) {
     let n = next(node)
     // skip if:
-    // - dynamic anchors (`<!--[-->`, `<!--]-->`)
-    // - dynamic fragment end anchors (`<!--$-->`)
+    // - dynamic anchors (`<!--[[-->`, `<!--][-->`)
+    // - dynamic fragment end anchors (e.g. `<!--if-->`, `<!--for-->`)
     if (n && (isDynamicAnchor(n) || isDynamicFragmentEndAnchor(n))) {
       n = next(n)
     }
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index b2e2dfcf1..e309554f2 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -557,7 +557,3 @@ export { startMeasure, endMeasure } from './profiling'
  * @internal
  */
 export { initFeatureFlags } from './featureFlags'
-/**
- * @internal
- */
-export { isDynamicAnchor, isDynamicFragmentEndAnchor } from './hydration'
diff --git a/packages/runtime-vapor/__tests__/hydration.spec.ts b/packages/runtime-vapor/__tests__/hydration.spec.ts
index 588983051..a37076ce1 100644
--- a/packages/runtime-vapor/__tests__/hydration.spec.ts
+++ b/packages/runtime-vapor/__tests__/hydration.spec.ts
@@ -4,6 +4,7 @@ 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 { DYNAMIC_COMPONENT_ANCHOR_LABEL, IF_ANCHOR_LABEL } from '@vue/shared'
 
 const Vue = { ...runtimeDom, ...runtimeVapor }
 
@@ -94,65 +95,66 @@ describe('Vapor Mode hydration', () => {
     document.body.innerHTML = ''
   })
 
-  test('root text', async () => {
-    const { data, container } = await testHydration(`
+  describe('element', () => {
+    test('root text', async () => {
+      const { data, container } = await testHydration(`
       <template>{{ data }}</template>
     `)
-    expect(container.innerHTML).toMatchInlineSnapshot(`"foo"`)
+      expect(container.innerHTML).toMatchInlineSnapshot(`"foo"`)
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(`"bar"`)
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toMatchInlineSnapshot(`"bar"`)
+    })
 
-  test('root comment', async () => {
-    const { container } = await testHydration(`
+    test('root comment', async () => {
+      const { container } = await testHydration(`
       <template><!----></template>
     `)
-    expect(container.innerHTML).toBe('<!---->')
-    expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
-  })
+      expect(container.innerHTML).toBe('<!---->')
+      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<!--]-->"`,
-    )
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<!--[--> A<span>foo</span>foo<!--]-->"`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[--> A<span>bar</span>bar<!--]-->"`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(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()
-  })
+      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(`
+    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>"`,
-    )
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<div class="foo">foo</div>"`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="bar">bar</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(`
+    test('element with elements children', async () => {
+      const { container } = await testHydration(`
       <template>
         <div>
           <span>{{ data }}</span>
@@ -160,111 +162,113 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
     `)
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span>foo</span><span class="foo"></span></div>"`,
-    )
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<div><span>foo</span><span class="foo"></span></div>"`,
+      )
 
-    // event handler
-    triggerEvent('click', container.querySelector('.foo')!)
+      // event handler
+      triggerEvent('click', container.querySelector('.foo')!)
 
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span>bar</span><span class="bar"></span></div>"`,
-    )
+      await nextTick()
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<div><span>bar</span><span class="bar"></span></div>"`,
+      )
+    })
   })
 
-  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>"`,
-    )
+        { 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>"`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<div><span></span>bar</div>"`,
+      )
+    })
 
-  test('fragment component', async () => {
-    const { container, data } = await testHydration(
-      `
+    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>"`,
-    )
+        { 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>"`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(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>"`,
-    )
+        { 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>"`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(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).toBe(
-      `<div>` +
-        `<!--[-->` +
-        `<div></div>` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<div></div>` +
-        `<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Parent: `<template><div/><components.Child/><div/></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<!--[-->` +
+          `<div></div>` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<div></div>` +
+          `<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<!--[-->` +
-        `<div></div>` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<div></div>` +
-        `<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<!--[-->` +
+          `<div></div>` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<div></div>` +
+          `<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('component with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('component with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -272,82 +276,82 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template>{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span>foo<span></span></div>"`,
-    )
+        {
+          Child: `<template>{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<div><span></span>foo<span></span></div>"`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span></span>bar<span></span></div>"`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toMatchInlineSnapshot(
+        `"<div><span></span>bar<span></span></div>"`,
+      )
+    })
 
-  test('nested components with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    test('nested components with anchor insertion', 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(container.innerHTML).toBe(
-      `<div><span></span><div>foo</div><span></span></div>`,
-    )
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div><span></span><div>foo</div><span></span></div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div><span></span><div>bar</div><span></span></div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div><span></span><div>bar</div><span></span></div>`,
+      )
+    })
 
-  test('nested components with multi level anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<div>foo</div>` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<div>foo</div>` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<div>bar</div>` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<div>bar</div>` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('consecutive components with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('consecutive components with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -356,104 +360,104 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template>{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `foo` +
-        `<!--[[-->foo<!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template>{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `foo` +
+          `<!--[[-->foo<!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `bar` +
-        `<!--[[-->bar<!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `bar` +
+          `<!--[[-->bar<!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('nested consecutive components with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    test('nested consecutive components with anchor insertion', 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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<div>foo</div>` +
-        `<!--[[--><div>foo</div><!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<div>foo</div>` +
+          `<!--[[--><div>foo</div><!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<div>bar</div>` +
-        `<!--[[--><div>bar</div><!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<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(
-      `
+    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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div></template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<div>foo</div>` +
-        `<!--[[--><div>foo</div><!--]]-->` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<div>foo</div>` +
+          `<!--[[--><div>foo</div><!--]]-->` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<div>bar</div>` +
-        `<!--[[--><div>bar</div><!--]]-->` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<div>bar</div>` +
+          `<!--[[--><div>bar</div><!--]]-->` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('mixed component and element with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('mixed component and element with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -463,36 +467,36 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template>{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `foo` +
-        `<span></span>` +
-        `foo` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template>{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `foo` +
+          `<span></span>` +
+          `foo` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `bar` +
-        `<span></span>` +
-        `bar` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `bar` +
+          `<span></span>` +
+          `bar` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('mixed component and text with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('mixed component and text with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -502,36 +506,36 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template>{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `foo` +
-        `<!--[[--> foo <!--]]-->` +
-        `foo` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template>{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `foo` +
+          `<!--[[--> foo <!--]]-->` +
+          `foo` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `bar` +
-        `<!--[[--> bar <!--]]-->` +
-        `bar` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `bar` +
+          `<!--[[--> bar <!--]]-->` +
+          `bar` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('fragment component with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('fragment component with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -539,98 +543,98 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('nested fragment component with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    test('nested fragment component with anchor insertion', 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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('nested fragment component with multi level anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+        {
+          Parent: `<template><div><span/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('consecutive fragment components with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('consecutive fragment components with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -639,151 +643,151 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        `<!--[[-->` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        `<!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          `<!--[[-->` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          `<!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        `<!--[[-->` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        `<!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          `<!--[[-->` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          `<!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('nested consecutive fragment components with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    test('nested consecutive fragment components with anchor insertion', 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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<!--[[-->` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<!--[[-->` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<!--[[-->` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<!--]]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<!--[[-->` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<!--]]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('nested consecutive fragment components with multi level anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+        {
+          Parent: `<template><div><span/><components.Child/><components.Child/><span/></div></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<!--[[-->` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<!--]]-->` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
         `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<!--[[-->` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<!--]]-->` +
-        `<span></span>` +
-        `</div>` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+          `<span></span>` +
+          `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<!--[[-->` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<!--]]-->` +
+          `<span></span>` +
+          `</div>` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('nested consecutive fragment components with root level anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `
+    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(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[-->` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<!--[--><div>foo</div>-foo-<!--]-->` +
-        `<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Parent: `<template><components.Child/><components.Child/></template>`,
+          Child: `<template><div>{{ data }}</div>-{{ data }}-</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[-->` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<!--[--><div>foo</div>-foo-<!--]-->` +
+          `<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[-->` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<!--[--><div>bar</div>-bar-<!--]-->` +
-        `<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[-->` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<!--[--><div>bar</div>-bar-<!--]-->` +
+          `<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('mixed fragment component and element with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('mixed fragment component and element with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -793,36 +797,36 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
-  })
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
 
-  test('mixed fragment component and text with anchor insertion', async () => {
-    const { container, data } = await testHydration(
-      `<template>
+    test('mixed fragment component and text with anchor insertion', async () => {
+      const { container, data } = await testHydration(
+        `<template>
         <div>
           <span/>
           <components.Child/>
@@ -832,31 +836,32 @@ describe('Vapor Mode hydration', () => {
         </div>
       </template>
       `,
-      {
-        Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
-      },
-    )
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        ` <!--[[--> foo <!--]]--> ` +
-        `<!--[--><div>foo</div>-foo<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+        {
+          Child: `<template><div>{{ data }}</div>-{{ data }}</template>`,
+        },
+      )
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          ` <!--[[--> foo <!--]]--> ` +
+          `<!--[--><div>foo</div>-foo<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
 
-    data.value = 'bar'
-    await nextTick()
-    expect(container.innerHTML).toBe(
-      `<div>` +
-        `<span></span>` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        ` <!--[[--> bar <!--]]--> ` +
-        `<!--[--><div>bar</div>-bar<!--]-->` +
-        `<span></span>` +
-        `</div>`,
-    )
+      data.value = 'bar'
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<div>` +
+          `<span></span>` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          ` <!--[[--> bar <!--]]--> ` +
+          `<!--[--><div>bar</div>-bar<!--]-->` +
+          `<span></span>` +
+          `</div>`,
+      )
+    })
   })
 
   describe('if', () => {
@@ -869,7 +874,7 @@ describe('Vapor Mode hydration', () => {
     })
 
     function runTests(isProd: boolean = false) {
-      const anchorLabel = isProd ? '$' : 'if'
+      const anchorLabel = IF_ANCHOR_LABEL
 
       test('basic toggle - true -> false', async () => {
         runWithEnv(isProd, async () => {
@@ -893,9 +898,6 @@ describe('Vapor Mode hydration', () => {
 
       test('basic toggle - false -> true', async () => {
         runWithEnv(isProd, async () => {
-          // v-if="false" is rendered as <!----> in the server-rendered HTML
-          // it reused as anchor, so the anchor label is empty in PROD
-          let anchorLabel = isProd ? '' : 'if'
           if (isProd) __DEV__ = false
           const data = ref(false)
           const { container } = await testHydration(
@@ -905,13 +907,13 @@ describe('Vapor Mode hydration', () => {
             undefined,
             data,
           )
-          expect(container.innerHTML).toBe(`<!--${anchorLabel}-->`)
+          // v-if="false" is rendered as <!----> in the server-rendered HTML
+          // it reused as anchor, so the anchor label is empty
+          expect(container.innerHTML).toBe(`<!---->`)
 
           data.value = true
           await nextTick()
-          expect(container.innerHTML).toBe(
-            `<div>foo</div><!--${anchorLabel}-->`,
-          )
+          expect(container.innerHTML).toBe(`<div>foo</div><!---->`)
         })
       })
 
@@ -1160,10 +1162,9 @@ describe('Vapor Mode hydration', () => {
         })
       })
 
-      // problem is there is a continuous `<!--$-->`
-      test.todo('on dynamic component with anchor insertion', async () => {
+      test('on dynamic component with anchor insertion', async () => {
         runWithEnv(isProd, async () => {
-          const dynamicComponentAnchorLabel = isProd ? '$' : 'dynamic-component'
+          const dynamicComponentAnchorLabel = DYNAMIC_COMPONENT_ANCHOR_LABEL
           const data = ref(true)
           const { container } = await testHydration(
             `<template>
@@ -1207,7 +1208,7 @@ describe('Vapor Mode hydration', () => {
     })
 
     function runTests(isProd: boolean = false) {
-      const anchorLabel = isProd ? '$' : 'dynamic-component'
+      const anchorLabel = DYNAMIC_COMPONENT_ANCHOR_LABEL
 
       test('basic dynamic component', async () => {
         runWithEnv(isProd, async () => {
diff --git a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
index db6901842..e272f0d22 100644
--- a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
@@ -9,7 +9,8 @@ import {
   insertionParent,
   resetInsertionState,
 } from './insertionState'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
+import { isHydrating } from './dom/hydration'
+import { DYNAMIC_COMPONENT_ANCHOR_LABEL } from '@vue/shared'
 
 export function createDynamicComponent(
   getter: () => any,
@@ -19,15 +20,9 @@ export function createDynamicComponent(
 ): VaporFragment {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
-  if (isHydrating) {
-    locateHydrationNode(true)
-  } else {
-    resetInsertionState()
-  }
+  if (!isHydrating) resetInsertionState()
 
-  const frag = __DEV__
-    ? new DynamicFragment('dynamic-component')
-    : new DynamicFragment()
+  const frag = new DynamicFragment(DYNAMIC_COMPONENT_ANCHOR_LABEL)
   renderEffect(() => {
     const value = getter()
     frag.update(
diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts
index 1e81d3745..bec4a3504 100644
--- a/packages/runtime-vapor/src/apiCreateIf.ts
+++ b/packages/runtime-vapor/src/apiCreateIf.ts
@@ -1,6 +1,11 @@
+import { IF_ANCHOR_LABEL } from '@vue/shared'
 import { type Block, type BlockFn, DynamicFragment, insert } from './block'
-import { isHydrating, locateHydrationNode } from './dom/hydration'
-import { insertionAnchor, insertionParent } from './insertionState'
+import { isHydrating } from './dom/hydration'
+import {
+  insertionAnchor,
+  insertionParent,
+  resetInsertionState,
+} from './insertionState'
 import { renderEffect } from './renderEffect'
 
 export function createIf(
@@ -11,15 +16,13 @@ export function createIf(
 ): Block {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
-  if (isHydrating) {
-    locateHydrationNode(true)
-  }
+  if (!isHydrating) resetInsertionState()
 
   let frag: Block
   if (once) {
     frag = condition() ? b1() : b2 ? b2() : []
   } else {
-    frag = __DEV__ ? new DynamicFragment('if') : new DynamicFragment()
+    frag = new DynamicFragment(IF_ANCHOR_LABEL)
     renderEffect(() => (frag as DynamicFragment).update(condition() ? b1 : b2))
   }
 
diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index 254779c64..c146bb10e 100644
--- a/packages/runtime-vapor/src/block.ts
+++ b/packages/runtime-vapor/src/block.ts
@@ -1,4 +1,4 @@
-import { isArray } from '@vue/shared'
+import { isArray, isDynamicFragmentEndAnchor } from '@vue/shared'
 import {
   type VaporComponentInstance,
   isVaporComponent,
@@ -7,8 +7,13 @@ import {
 } from './component'
 import { createComment, createTextNode, nextSiblingAnchor } from './dom/node'
 import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
-import { currentHydrationNode, isComment, isHydrating } from './dom/hydration'
-import { isDynamicFragmentEndAnchor, warn } from '@vue/runtime-dom'
+import {
+  currentHydrationNode,
+  isComment,
+  isHydrating,
+  locateHydrationNode,
+} from './dom/hydration'
+import { warn } from '@vue/runtime-dom'
 
 export type Block =
   | Node
@@ -39,7 +44,8 @@ export class DynamicFragment extends VaporFragment {
   constructor(anchorLabel?: string) {
     super([])
     if (isHydrating) {
-      this.hydrate(anchorLabel)
+      locateHydrationNode(true)
+      this.hydrate(anchorLabel!)
     } else {
       this.anchor =
         __DEV__ && anchorLabel ? createComment(anchorLabel) : createTextNode()
@@ -81,15 +87,15 @@ export class DynamicFragment extends VaporFragment {
     resetTracking()
   }
 
-  hydrate(label?: string): void {
+  hydrate(label: string): void {
     // for v-if="false" the hydrationNode will be a empty comment node
     // use it as anchor.
     // otherwise, use the next sibling comment node as anchor
     if (isComment(currentHydrationNode!, '')) {
       this.anchor = currentHydrationNode
     } else {
-      // find next sibling `<!--$-->` as anchor
-      const anchor = nextSiblingAnchor(currentHydrationNode!, '$')!
+      // find next sibling dynamic fragment end anchor
+      const anchor = nextSiblingAnchor(currentHydrationNode!, label)!
       if (anchor && isDynamicFragmentEndAnchor(anchor)) {
         this.anchor = anchor
       } else if (__DEV__) {
@@ -97,7 +103,6 @@ export class DynamicFragment extends VaporFragment {
         warn(`DynamicFragment anchor not found...`)
       }
     }
-    if (__DEV__ && label && this.anchor) (this.anchor as Comment).data = label
   }
 }
 
diff --git a/packages/runtime-vapor/src/dom/hydration.ts b/packages/runtime-vapor/src/dom/hydration.ts
index 4d4ba85c4..b0e8e7d52 100644
--- a/packages/runtime-vapor/src/dom/hydration.ts
+++ b/packages/runtime-vapor/src/dom/hydration.ts
@@ -1,4 +1,4 @@
-import { isDynamicFragmentEndAnchor, warn } from '@vue/runtime-dom'
+import { warn } from '@vue/runtime-dom'
 import {
   insertionAnchor,
   insertionParent,
@@ -12,6 +12,7 @@ import {
   next,
   prev,
 } from './node'
+import { isDynamicFragmentEndAnchor } from '@vue/shared'
 
 export let isHydrating = false
 export let currentHydrationNode: Node | null = null
diff --git a/packages/runtime-vapor/src/dom/node.ts b/packages/runtime-vapor/src/dom/node.ts
index 1ea4831f3..2a546c69e 100644
--- a/packages/runtime-vapor/src/dom/node.ts
+++ b/packages/runtime-vapor/src/dom/node.ts
@@ -1,10 +1,15 @@
-import { isDynamicAnchor } from '@vue/runtime-dom'
 import {
   isComment,
   isEmptyText,
   locateEndAnchor,
   locateStartAnchor,
 } from './hydration'
+import {
+  DYNAMIC_END_ANCHOR_LABEL,
+  DYNAMIC_START_ANCHOR_LABEL,
+  isDynamicAnchor,
+  isDynamicFragmentEndAnchor,
+} from '@vue/shared'
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function createTextNode(value = ''): Text {
@@ -102,8 +107,12 @@ export function disableHydrationNodeLookup(): void {
 /*! #__NO_SIDE_EFFECTS__ */
 export function prev(node: Node): Node | null {
   // process dynamic node (<!--[[-->...<!--]]-->) as a single one
-  if (isComment(node, ']]')) {
-    node = locateStartAnchor(node, '[[', ']]')!
+  if (isComment(node, DYNAMIC_END_ANCHOR_LABEL)) {
+    node = locateStartAnchor(
+      node,
+      DYNAMIC_START_ANCHOR_LABEL,
+      DYNAMIC_END_ANCHOR_LABEL,
+    )!
   }
 
   // process fragment node (<!--[-->...<!--]-->) as a single one
@@ -122,21 +131,12 @@ function isNonHydrationNode(node: Node) {
   return (
     // empty text nodes, no need to hydrate
     isEmptyText(node) ||
-    // dynamic anchors (<!--[[-->, <!--]]-->)
+    // dynamic node anchors (<!--[[-->, <!--]]-->)
     isDynamicAnchor(node) ||
     // fragment end anchor (`<!--]-->`)
     isComment(node, ']') ||
-    // dynamic fragment anchors
-    (__DEV__
-      ? // v-if anchor (`<!--if-->`)
-        isComment(node, 'if') ||
-        // v-for anchor (`<!--for-->`)
-        isComment(node, 'for') ||
-        // v-slot anchor (`<!--slot-->`)
-        isComment(node, 'slot') ||
-        // dynamic-component anchor (`<!--dynamic-component-->`)
-        isComment(node, 'dynamic-component')
-      : isComment(node, '$'))
+    // dynamic fragment end anchors
+    isDynamicFragmentEndAnchor(node)
   )
 }
 
@@ -157,8 +157,12 @@ export function nextSiblingAnchor(
 
 function handleWrappedNode(node: Node): Node {
   // process dynamic node (<!--[[-->...<!--]]-->) as a single one
-  if (isComment(node, '[[')) {
-    return locateEndAnchor(node, '[[', ']]')!
+  if (isComment(node, DYNAMIC_START_ANCHOR_LABEL)) {
+    return locateEndAnchor(
+      node,
+      DYNAMIC_START_ANCHOR_LABEL,
+      DYNAMIC_END_ANCHOR_LABEL,
+    )!
   }
 
   // process fragment (<!--[-->...<!--]-->) as a single one
diff --git a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
index 471a48edb..cbf13db25 100644
--- a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
+++ b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
@@ -25,7 +25,7 @@ describe('ssr: attr fallthrough', () => {
       template: `<child :ok="ok" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent, { ok: true }))).toBe(
-      `<div class="foo bar"></div><!--$-->`,
+      `<div class="foo bar"></div><!--if-->`,
     )
     expect(await renderToString(createApp(Parent, { ok: false }))).toBe(
       `<span class="bar"></span>`,
diff --git a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
index 0679c8216..b685fbfe1 100644
--- a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
@@ -14,7 +14,9 @@ describe('ssr: dynamic component', () => {
           template: `<component :is="'one'"><span>slot</span></component>`,
         }),
       ),
-    ).toBe(`<div><!--[--><span>slot</span><!--]--></div>`)
+    ).toBe(
+      `<div><!--[--><span>slot</span><!--]--></div><!--dynamic-component-->`,
+    )
   })
 
   test('resolved to component with v-show', async () => {
@@ -30,7 +32,7 @@ describe('ssr: dynamic component', () => {
         }),
       ),
     ).toBe(
-      `<div><!--[--><div style=\"display:none;\"><!--[-->hi<!--]--></div><!--]--></div>`,
+      `<div><!--[--><div style="display:none;"><!--[-->hi<!--]--></div><!--dynamic-component--><!--]--></div><!--dynamic-component-->`,
     )
   })
 
@@ -41,7 +43,7 @@ describe('ssr: dynamic component', () => {
           template: `<component :is="'p'"><span>slot</span></component>`,
         }),
       ),
-    ).toBe(`<p><span>slot</span></p>`)
+    ).toBe(`<p><span>slot</span></p><!--dynamic-component-->`)
   })
 
   test('resolve to component vnode', async () => {
@@ -60,7 +62,9 @@ describe('ssr: dynamic component', () => {
           template: `<component :is="vnode"><span>slot</span></component>`,
         }),
       ),
-    ).toBe(`<div>test<!--[--><span>slot</span><!--]--></div>`)
+    ).toBe(
+      `<div>test<!--[--><span>slot</span><!--]--></div><!--dynamic-component-->`,
+    )
   })
 
   test('resolve to element vnode', async () => {
@@ -75,6 +79,6 @@ describe('ssr: dynamic component', () => {
           template: `<component :is="vnode"><span>slot</span></component>`,
         }),
       ),
-    ).toBe(`<div id="test"><span>slot</span></div>`)
+    ).toBe(`<div id="test"><span>slot</span></div><!--dynamic-component-->`)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index 7f104e424..0e3e35356 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -94,7 +94,7 @@ describe('ssr: slot', () => {
           template: `<one><template v-if="true">hello</template></one>`,
         }),
       ),
-    ).toBe(`<div><!--[--><!--[-->hello<!--]--><!--$--><!--]--></div>`)
+    ).toBe(`<div><!--[--><!--[-->hello<!--]--><!--if--><!--]--></div>`)
   })
 
   test('fragment slot (template v-if + multiple elements)', async () => {
@@ -106,7 +106,7 @@ describe('ssr: slot', () => {
         }),
       ),
     ).toBe(
-      `<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--$--><!--]--></div>`,
+      `<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--if--><!--]--></div>`,
     )
   })
 
@@ -135,7 +135,7 @@ describe('ssr: slot', () => {
           template: `<one><div v-if="true">foo</div></one>`,
         }),
       ),
-    ).toBe(`<div>foo</div><!--$-->`)
+    ).toBe(`<div>foo</div><!--if-->`)
   })
 
   // #9933
@@ -170,7 +170,9 @@ describe('ssr: slot', () => {
           template: `<ButtonComp><Wrap><div v-if="false">hello</div></Wrap></ButtonComp>`,
         }),
       ),
-    ).toBe(`<button><!--[--><div><!--[--><!--]--></div><!--]--></button>`)
+    ).toBe(
+      `<button><!--[--><div><!--[--><!--]--></div><!--]--></button><!--dynamic-component-->`,
+    )
 
     expect(
       await renderToString(
@@ -187,7 +189,7 @@ describe('ssr: slot', () => {
         }),
       ),
     ).toBe(
-      `<button><!--[--><div><!--[--><div>hello</div><!--]--></div><!--]--></button>`,
+      `<button><!--[--><div><!--[--><div>hello</div><!--]--></div><!--]--></button><!--dynamic-component-->`,
     )
 
     expect(
@@ -201,6 +203,6 @@ describe('ssr: slot', () => {
           template: `<ButtonComp><template v-if="false">hello</template></ButtonComp>`,
         }),
       ),
-    ).toBe(`<button><!--[--><!--]--></button>`)
+    ).toBe(`<button><!--[--><!--]--></button><!--dynamic-component-->`)
   })
 })
diff --git a/packages/server-renderer/src/render.ts b/packages/server-renderer/src/render.ts
index f4775bb9d..221d3895e 100644
--- a/packages/server-renderer/src/render.ts
+++ b/packages/server-renderer/src/render.ts
@@ -264,7 +264,6 @@ export function renderVNode(
         renderElementVNode(push, vnode, parentComponent, slotScopeId)
       } else if (shapeFlag & ShapeFlags.COMPONENT) {
         push(renderComponentVNode(vnode, parentComponent, slotScopeId))
-        push(`<!--$-->`) // anchor for vapor hydration
       } else if (shapeFlag & ShapeFlags.TELEPORT) {
         renderTeleportVNode(push, vnode, parentComponent, slotScopeId)
       } else if (shapeFlag & ShapeFlags.SUSPENSE) {
diff --git a/packages/shared/src/domAnchors.ts b/packages/shared/src/domAnchors.ts
new file mode 100644
index 000000000..ae75a97b1
--- /dev/null
+++ b/packages/shared/src/domAnchors.ts
@@ -0,0 +1,30 @@
+export const DYNAMIC_START_ANCHOR_LABEL = '[['
+export const DYNAMIC_END_ANCHOR_LABEL = ']]'
+
+export const IF_ANCHOR_LABEL: string = __DEV__ ? 'if' : '$'
+export const DYNAMIC_COMPONENT_ANCHOR_LABEL: string = __DEV__
+  ? 'dynamic-component'
+  : '$2'
+export const FOR_ANCHOR_LABEL: string = __DEV__ ? 'for' : '$3'
+export const SLOT_ANCHOR_LABEL: string = __DEV__ ? 'slot' : '$4'
+
+export function isDynamicAnchor(node: Node): node is Comment {
+  if (node.nodeType !== 8) return false
+
+  const data = (node as Comment).data
+  return (
+    data === DYNAMIC_START_ANCHOR_LABEL || data === DYNAMIC_END_ANCHOR_LABEL
+  )
+}
+
+export function isDynamicFragmentEndAnchor(node: Node): node is Comment {
+  if (node.nodeType !== 8) return false
+
+  const data = (node as Comment).data
+  return (
+    data === IF_ANCHOR_LABEL ||
+    data === FOR_ANCHOR_LABEL ||
+    data === SLOT_ANCHOR_LABEL ||
+    data === DYNAMIC_COMPONENT_ANCHOR_LABEL
+  )
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index dc56faf8c..674bcdf96 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -13,3 +13,4 @@ export * from './looseEqual'
 export * from './toDisplayString'
 export * from './typeUtils'
 export * from './subSequence'
+export * from './domAnchors'