From c8ecebca876da310227592b0121d97d591959182 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 3 Sep 2026 13:45:22 -0700
Subject: [PATCH 1/6] fix: remove legacy hydration marker support

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: c66c1387-9a1b-4386-8d0f-a115ef5706db
---
 ...-18fad60c-d54c-48ef-be11-88bbbada8c2e.json |   7 +
 packages/fast-element/SIZES.md                |  10 +-
 .../src/components/hydration.pw.spec.ts       | 144 +++++-------------
 .../fast-element/src/components/hydration.ts  | 116 +-------------
 .../src/hydration/target-builder.ts           |  42 +----
 5 files changed, 53 insertions(+), 266 deletions(-)
 create mode 100644 change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json

diff --git a/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json b/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
new file mode 100644
index 00000000000..826e26ca923
--- /dev/null
+++ b/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove support for legacy indexed hydration markers.",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md
index 1b48086fe26..d90852fbfc0 100644
--- a/packages/fast-element/SIZES.md
+++ b/packages/fast-element/SIZES.md
@@ -4,7 +4,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
-| CDN Rollup Bundle | 78.79 KB | 23.43 KB | 20.84 KB |
+| CDN Rollup Bundle | 76.80 KB | 22.94 KB | 20.31 KB |
 | FASTElement (@microsoft/fast-element/fast-element.js) | 23.11 KB | 7.12 KB | 6.41 KB |
 | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 290 B |
 | Observable (@microsoft/fast-element/observable.js) | 6.75 KB | 2.51 KB | 2.23 KB |
@@ -15,11 +15,11 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | slotted (@microsoft/fast-element/slotted.js) | 4.66 KB | 1.81 KB | 1.59 KB |
 | volatile (@microsoft/fast-element/volatile.js) | 6.84 KB | 2.54 KB | 2.26 KB |
 | when (@microsoft/fast-element/when.js) | 1.88 KB | 731 B | 589 B |
-| html (@microsoft/fast-element/html.js) | 27.91 KB | 8.98 KB | 8.04 KB |
-| repeat (@microsoft/fast-element/repeat.js) | 31.80 KB | 10.00 KB | 9.03 KB |
+| html (@microsoft/fast-element/html.js) | 25.94 KB | 8.43 KB | 7.57 KB |
+| repeat (@microsoft/fast-element/repeat.js) | 29.84 KB | 9.45 KB | 8.52 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
-| enableHydration (@microsoft/fast-element/hydration.js) | 46.71 KB | 13.94 KB | 12.51 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 62.33 KB | 19.49 KB | 17.46 KB |
+| enableHydration (@microsoft/fast-element/hydration.js) | 44.74 KB | 13.39 KB | 12.05 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 60.36 KB | 18.91 KB | 16.99 KB |
 | ArrayObserver (@microsoft/fast-element/arrays.js) | 12.55 KB | 4.46 KB | 4.03 KB |
 | observerMap (@microsoft/fast-element/observer-map.js) | 21.96 KB | 7.73 KB | 6.97 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.31 KB | 5.41 KB | 4.88 KB |
diff --git a/packages/fast-element/src/components/hydration.pw.spec.ts b/packages/fast-element/src/components/hydration.pw.spec.ts
index 2de1ba19253..97dda986813 100644
--- a/packages/fast-element/src/components/hydration.pw.spec.ts
+++ b/packages/fast-element/src/components/hydration.pw.spec.ts
@@ -451,128 +451,52 @@ test.describe("The prerendered content optimization", () => {
         expect(result.spanCount).toBe(3);
     });
 
-    test("should hydrate legacy indexed repeat markers", async ({ page }) => {
+    test("does not recognize legacy hydration markers", async ({ page }) => {
         await page.goto("/");
 
-        const element = await page.evaluateHandle(async () => {
+        const result = await page.evaluate(async () => {
             const {
-                enableHydration,
-                FASTElement,
-                FASTElementDefinition,
-                html,
-                repeat,
-                uniqueElementName,
+                HydrationMarkup,
                 // @ts-expect-error: Client module.
             } = await import("/main.js");
 
-            enableHydration();
-            const name = uniqueElementName();
-
-            class TestElement extends FASTElement {
-                items = ["one", "two"];
-
-                static definition = {
-                    name,
-                    template: html<TestElement>`
-                        ${repeat((x: { items: any }) => x.items, html<string>`<span>${(x: any) => x}</span>`)}
-                    `,
-                };
-            }
-
-            await (await FASTElementDefinition.compose(TestElement)).define();
-
-            const container = document.createElement("div");
-            document.body.appendChild(container);
-            (container as any).setHTMLUnsafe(
-                `<${name}><template shadowrootmode="open"><!--fe-b$$start$$0$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat--><span><!--fe-b$$start$$0$$item-1$$fe-b-->server-one<!--fe-b$$end$$0$$item-1$$fe-b--></span><!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$0$$repeat-1$$fe-b--></template></${name}>`,
-            );
-
-            return container.firstElementChild;
-        });
-
-        expect(await element.evaluate((x: any) => x.$fastController)).toEqual(
-            expect.anything(),
-        );
-
-        const result = await element.evaluate(async (element: any) => {
-            await element.$fastController.isHydrated;
-            await new Promise(resolve => requestAnimationFrame(resolve));
+            const element = document.createElement("div");
+            element.setAttribute("data-fe-b", "0 1");
+            element.setAttribute("data-fe-b-2", "");
+            element.setAttribute("data-fe-c-3-2", "");
 
             return {
-                text: element.shadowRoot?.textContent?.replace(/\s+/g, "") ?? "",
-                spanCount: element.shadowRoot?.querySelectorAll("span").length ?? 0,
+                attributeCount: HydrationMarkup.parseAttributeBindingCount(element),
+                contentEnd: HydrationMarkup.isContentBindingEndMarker(
+                    "fe-b$$end$$0$$scope$$fe-b",
+                ),
+                contentStart: HydrationMarkup.isContentBindingStartMarker(
+                    "fe-b$$start$$0$$scope$$fe-b",
+                ),
+                elementEnd: HydrationMarkup.isElementBoundaryEndMarker(
+                    document.createComment("fe-eb$$end$$element$$fe-eb"),
+                ),
+                elementStart: HydrationMarkup.isElementBoundaryStartMarker(
+                    document.createComment("fe-eb$$start$$element$$fe-eb"),
+                ),
+                repeatEnd: HydrationMarkup.isRepeatViewEndMarker(
+                    "fe-repeat$$end$$0$$fe-repeat",
+                ),
+                repeatStart: HydrationMarkup.isRepeatViewStartMarker(
+                    "fe-repeat$$start$$0$$fe-repeat",
+                ),
             };
         });
 
-        expect(result.text).toBe("onetwo");
-        expect(result.spanCount).toBe(2);
-    });
-
-    test("should hydrate legacy indexed attribute markers", async ({ page }) => {
-        await page.goto("/");
-
-        const element = await page.evaluateHandle(async () => {
-            const {
-                enableHydration,
-                FASTElement,
-                FASTElementDefinition,
-                html,
-                ref,
-                uniqueElementName,
-                // @ts-expect-error: Client module.
-            } = await import("/main.js");
-
-            enableHydration();
-            const name = uniqueElementName();
-
-            class TestElement extends FASTElement {
-                count = 0;
-                disabled = false;
-                input!: HTMLInputElement;
-
-                static definition = {
-                    name,
-                    template: html<TestElement>`
-                        <input ${ref("input")}>
-                        <button
-                            ?disabled=${(x: TestElement) => x.disabled}
-                            @click=${(x: TestElement) => x.count++}
-                        >
-                            Increment
-                        </button>
-                    `,
-                };
-            }
-
-            await (await FASTElementDefinition.compose(TestElement)).define();
-
-            const container = document.createElement("div");
-            document.body.appendChild(container);
-            (container as any).setHTMLUnsafe(
-                `<${name}><template shadowrootmode="open"><input data-fe-b-0><button data-fe-c-1-2>Increment</button></template></${name}>`,
-            );
-
-            return container.firstElementChild;
+        expect(result).toEqual({
+            attributeCount: null,
+            contentEnd: false,
+            contentStart: false,
+            elementEnd: false,
+            elementStart: false,
+            repeatEnd: false,
+            repeatStart: false,
         });
-
-        expect(await element.evaluate((x: any) => x.$fastController)).toEqual(
-            expect.anything(),
-        );
-
-        const result = await element.evaluate(async (element: any) => {
-            await element.$fastController.isHydrated;
-            await new Promise(resolve => requestAnimationFrame(resolve));
-            element.shadowRoot!.querySelector("button")!.click();
-
-            return {
-                count: element.count,
-                inputResolved:
-                    element.input === element.shadowRoot!.querySelector("input"),
-            };
-        });
-
-        expect(result.count).toBe(1);
-        expect(result.inputResolved).toBe(true);
     });
 
     test("should remove extra repeat ranges when SSR rendered more items", async ({
diff --git a/packages/fast-element/src/components/hydration.ts b/packages/fast-element/src/components/hydration.ts
index 4a76689409c..a2d4c9446e8 100644
--- a/packages/fast-element/src/components/hydration.ts
+++ b/packages/fast-element/src/components/hydration.ts
@@ -33,20 +33,8 @@ import type {
  * Attribute bindings use a single `data-fe` attribute whose value is
  * the count of attribute binding factories targeting the element:
  *   <div data-fe="3"> (3 attribute bindings)
- *
- * WebUI versions that predate the data-free marker format still emit indexed
- * markers. The parser below accepts those legacy markers so existing WebUI SSR
- * output can hydrate against the newer FAST runtime.
  */
 
-const legacyBindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
-const legacyBindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
-const legacyRepeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
-const legacyRepeatViewEndMarker = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/;
-const legacyElementBoundaryStartMarker = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/;
-const legacyElementBoundaryEndMarker =
-    /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
-
 function isComment(node: Node): node is Comment {
     return node && node.nodeType === Node.COMMENT_NODE;
 }
@@ -58,8 +46,6 @@ function isComment(node: Node): node is Comment {
 export const HydrationMarkup = Object.freeze({
     // Single attribute marker format (count only)
     attributeMarkerName: "data-fe",
-    legacyAttributeMarkerName: "data-fe-b",
-    legacyCompactAttributeMarkerName: "data-fe-c",
 
     // Content binding markers (no arguments)
     contentBindingStartMarker(): string {
@@ -87,28 +73,22 @@ export const HydrationMarkup = Object.freeze({
 
     // Detection — simple string equality
     isContentBindingStartMarker(data: string): boolean {
-        return data === "fe:b" || legacyBindingStartMarker.test(data);
+        return data === "fe:b";
     },
     isContentBindingEndMarker(data: string): boolean {
-        return data === "fe:/b" || legacyBindingEndMarker.test(data);
+        return data === "fe:/b";
     },
     isRepeatViewStartMarker(data: string): boolean {
-        return data === "fe:r" || legacyRepeatViewStartMarker.test(data);
+        return data === "fe:r";
     },
     isRepeatViewEndMarker(data: string): boolean {
-        return data === "fe:/r" || legacyRepeatViewEndMarker.test(data);
+        return data === "fe:/r";
     },
     isElementBoundaryStartMarker(node: Node): boolean {
-        return (
-            isComment(node) &&
-            (node.data === "fe:e" || legacyElementBoundaryStartMarker.test(node.data))
-        );
+        return isComment(node) && node.data === "fe:e";
     },
     isElementBoundaryEndMarker(node: Node): boolean {
-        return (
-            isComment(node) &&
-            (node.data === "fe:/e" || legacyElementBoundaryEndMarker.test(node.data))
-        );
+        return isComment(node) && node.data === "fe:/e";
     },
 
     /**
@@ -142,92 +122,8 @@ export const HydrationMarkup = Object.freeze({
 
         return count;
     },
-
-    parseLegacyAttributeBindingIndices(node: Element): number[] | null {
-        const indices: number[] = [];
-        const attr = node.getAttribute(this.legacyAttributeMarkerName);
-
-        if (attr !== null) {
-            for (const value of attr.trim().split(/\s+/)) {
-                if (value === "") {
-                    continue;
-                }
-
-                const index = Number(value);
-
-                if (!Number.isInteger(index) || index < 0) {
-                    throw FAST.error(Message.invalidHydrationAttributeMarker, {
-                        value: attr,
-                    });
-                }
-
-                indices.push(index);
-            }
-        }
-
-        const enumeratedPrefix = `${this.legacyAttributeMarkerName}-`;
-        const compactPrefix = `${this.legacyCompactAttributeMarkerName}-`;
-
-        for (const name of node.getAttributeNames()) {
-            if (name.startsWith(enumeratedPrefix)) {
-                const index = Number(name.slice(enumeratedPrefix.length));
-
-                if (!Number.isInteger(index) || index < 0) {
-                    throw FAST.error(Message.invalidHydrationAttributeMarker, {
-                        value: name,
-                    });
-                }
-
-                indices.push(index);
-            } else if (name.startsWith(compactPrefix)) {
-                const [start, count] = name
-                    .slice(compactPrefix.length)
-                    .split("-")
-                    .map(value => Number(value));
-
-                if (
-                    !Number.isInteger(start) ||
-                    !Number.isInteger(count) ||
-                    start < 0 ||
-                    count < 1
-                ) {
-                    throw FAST.error(Message.invalidHydrationAttributeMarker, {
-                        value: name,
-                    });
-                }
-
-                for (let i = 0; i < count; i++) {
-                    indices.push(start + i);
-                }
-            }
-        }
-
-        return indices.length === 0 ? null : indices;
-    },
-
-    removeLegacyAttributeBindingMarkers(node: Element): void {
-        node.removeAttribute(this.legacyAttributeMarkerName);
-
-        for (const name of node.getAttributeNames()) {
-            if (
-                name.startsWith(`${this.legacyAttributeMarkerName}-`) ||
-                name.startsWith(`${this.legacyCompactAttributeMarkerName}-`)
-            ) {
-                node.removeAttribute(name);
-            }
-        }
-    },
-
-    parseLegacyContentBindingStartIndex(data: string): number | null {
-        return parseLegacyIntMarker(legacyBindingStartMarker, data);
-    },
 });
 
-function parseLegacyIntMarker(pattern: RegExp, data: string): number | null {
-    const match = pattern.exec(data);
-    return match === null ? null : Number(match[1]);
-}
-
 /**
  * @internal
  */
diff --git a/packages/fast-element/src/hydration/target-builder.ts b/packages/fast-element/src/hydration/target-builder.ts
index d08f23d6318..e2a281ae2f3 100644
--- a/packages/fast-element/src/hydration/target-builder.ts
+++ b/packages/fast-element/src/hydration/target-builder.ts
@@ -157,39 +157,6 @@ export function buildViewBindingTargets(
         switch (node.nodeType) {
             case Node.ELEMENT_NODE: {
                 const element = node as Element;
-                const legacyIndices =
-                    HydrationMarkup.parseLegacyAttributeBindingIndices(element);
-
-                if (legacyIndices !== null) {
-                    for (const index of legacyIndices) {
-                        const factoryIndex = index + hydrationIndexOffset;
-                        const factory = factories[factoryIndex];
-                        if (!factory) {
-                            const expected = formatNoMoreAttributeBindings(
-                                factories.length,
-                            );
-                            const result = getHydrationDiagnostic().formatStructuralError(
-                                node,
-                                getHostName(node),
-                                expected,
-                            );
-                            throw new HydrationTargetElementError(
-                                result.message,
-                                factories,
-                                element,
-                                result.expected,
-                                result.received,
-                            );
-                        }
-
-                        targetFactory(factory, node, targets);
-                        factoryPointer = Math.max(factoryPointer, factoryIndex + 1);
-                    }
-
-                    HydrationMarkup.removeLegacyAttributeBindingMarkers(element);
-                    break;
-                }
-
                 const count = HydrationMarkup.parseAttributeBindingCount(element);
                 if (count !== null) {
                     for (let i = 0; i < count; i++) {
@@ -226,14 +193,7 @@ export function buildViewBindingTargets(
                     skipToElementBoundaryEnd(walker, factories, node);
                 } else if (HydrationMarkup.isContentBindingStartMarker(data)) {
                     // Content binding — consume next factory
-                    const legacyIndex =
-                        HydrationMarkup.parseLegacyContentBindingStartIndex(data);
-                    const factoryIndex =
-                        legacyIndex === null
-                            ? factoryPointer++
-                            : legacyIndex + hydrationIndexOffset;
-                    const factory = factories[factoryIndex];
-                    factoryPointer = Math.max(factoryPointer, factoryIndex + 1);
+                    const factory = factories[factoryPointer++];
 
                     if (!factory) {
                         const expected = formatNoMoreContentBindings(factories.length);

From 4bb29ff9e2392722c2038805ea0b9d12b1c73622 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:08:42 -0700
Subject: [PATCH 2/6] feat: add opt-in v2 hydration markers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: c66c1387-9a1b-4386-8d0f-a115ef5706db
---
 ...-18fad60c-d54c-48ef-be11-88bbbada8c2e.json |   4 +-
 packages/fast-element/DESIGN.md               |   2 +-
 packages/fast-element/README.md               |  10 +
 packages/fast-element/SIZES.md                |  10 +-
 .../fast-element/docs/declarative/design.md   |  16 +-
 .../fast-element/docs/declarative/syntax.md   |  10 +
 .../src/components/enable-hydration.ts        |  16 ++
 .../src/components/hydration-tracker.ts       |  10 +
 .../src/components/hydration.pw.spec.ts       | 223 +++++++++++++++---
 .../fast-element/src/components/hydration.ts  | 113 +--------
 .../fast-element/src/hydration/exports.ts     |   2 +
 .../fast-element/src/hydration/markers.ts     | 203 ++++++++++++++++
 .../fast-element/src/hydration/markers_v2.ts  | 175 ++++++++++++++
 .../fast-element/src/hydration/messages.ts    |  16 +-
 .../src/hydration/target-builder.ts           |  59 +++--
 .../fast-element/src/templating/repeat.ts     |  13 +-
 packages/fast-element/test/main.ts            |   1 +
 .../src/docs/3.x/migration-guide/hydration.md |  27 ++-
 .../src/docs/3.x/resources/export-sizes.md    |  10 +-
 19 files changed, 713 insertions(+), 207 deletions(-)
 create mode 100644 packages/fast-element/src/hydration/markers.ts
 create mode 100644 packages/fast-element/src/hydration/markers_v2.ts

diff --git a/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json b/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
index 826e26ca923..5669f711ea5 100644
--- a/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
+++ b/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
@@ -1,6 +1,6 @@
 {
-  "type": "patch",
-  "comment": "Remove support for legacy indexed hydration markers.",
+  "type": "minor",
+  "comment": "Add opt-in hydration support for FAST Element 2.x indexed markers.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md
index cc6a1653bdc..92776e2939b 100644
--- a/packages/fast-element/DESIGN.md
+++ b/packages/fast-element/DESIGN.md
@@ -174,7 +174,7 @@ formatter in a custom `HydrationDebugger` and pass it through
 `enableHydration({ debugger })`) if you want to route diagnostics into
 logging, telemetry, or a devtools panel.
 
-- **Hydration tracking**: Hydration is opt-in via `enableHydration()` from `@microsoft/fast-element/hydration.js`, which creates a `HydrationTracker` and installs a pluggable hydration hook on `ElementController` via `ElementController.installHydrationHook()`. Until this is called, `renderTemplate()` always uses the client-side path — even if the element has a pre-existing shadow root. `HydrationTracker` manages a `Set<HTMLElement>` of pending elements and resolves the returned controller's `whenHydrated()` promise via a debounced `setTimeout(0)` after the last element finishes binding — ensuring all async template batches settle first. It also resolves tag-specific `whenHydrated(tagName)` promises when work for that FAST element tag completes. By default, the hook no-ops for later prerendered batches after hydration completes; `enableHydration({ stopHydration: StopHydration.never })` keeps the hook active for streamed Declarative Shadow DOM so new elements continue checking for an existing shadow root and hydrate instead of re-rendering it. In that mode, the global `whenHydrated()` promise intentionally remains pending.
+- **Hydration tracking**: Hydration is opt-in via `enableHydration()` from `@microsoft/fast-element/hydration.js`, which creates a `HydrationTracker` and installs a pluggable hydration hook on `ElementController` via `ElementController.installHydrationHook()`. Until this is called, `renderTemplate()` always uses the client-side path — even if the element has a pre-existing shadow root. `HydrationTracker` manages a `Set<HTMLElement>` of pending elements and resolves the returned controller's `whenHydrated()` promise via a debounced `setTimeout(0)` after the last element finishes binding — ensuring all async template batches settle first. It also resolves tag-specific `whenHydrated(tagName)` promises when work for that FAST element tag completes. Hydration target discovery uses the 3.x data-free marker reader by default; `enableHydration({ markers: v2 })` installs the isolated 2.x indexed marker reader for staged SSR migrations. By default, the hook no-ops for later prerendered batches after hydration completes; `enableHydration({ stopHydration: StopHydration.never })` keeps the hook active for streamed Declarative Shadow DOM so new elements continue checking for an existing shadow root and hydrate instead of re-rendering it. In that mode, the global `whenHydrated()` promise intentionally remains pending.
 - On `disconnect()`: calls `disconnectedCallback` on behaviors, unbinds the view.
 - `onAttributeChangedCallback()` is the standard handler that processes attribute changes. During the prerendered bind, it is temporarily swapped to a no-op (see above) to avoid redundant processing of server-rendered attribute values.
 - Exposes `addBehavior` / `removeBehavior` for dynamic `HostBehavior` management (used by `ElementStyles`).
diff --git a/packages/fast-element/README.md b/packages/fast-element/README.md
index 2ac45a7e9c9..56659e5cf11 100644
--- a/packages/fast-element/README.md
+++ b/packages/fast-element/README.md
@@ -212,6 +212,16 @@ enableHydration({
 });
 ```
 
+FAST Element 3.x data-free hydration markers are used by default. To hydrate
+server output that still contains FAST Element 2.x indexed markers, opt into the
+legacy marker reader:
+
+```typescript
+import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+
+enableHydration({ markers: v2 });
+```
+
 When hydration is enabled and a FAST element connects with an existing shadow root (from server-side rendering or declarative shadow DOM), `ElementController` detects this and hydrates instead of re-rendering. Two properties on the controller let you inspect the result:
 
 - **`isPrerendered: Promise<boolean>`** — resolves `true` when the element had a declarative shadow root (DSD) at connect time, regardless of whether hydration ran.
diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md
index d90852fbfc0..e9e0ede9ebd 100644
--- a/packages/fast-element/SIZES.md
+++ b/packages/fast-element/SIZES.md
@@ -4,7 +4,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
-| CDN Rollup Bundle | 76.80 KB | 22.94 KB | 20.31 KB |
+| CDN Rollup Bundle | 77.51 KB | 23.14 KB | 20.53 KB |
 | FASTElement (@microsoft/fast-element/fast-element.js) | 23.11 KB | 7.12 KB | 6.41 KB |
 | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 290 B |
 | Observable (@microsoft/fast-element/observable.js) | 6.75 KB | 2.51 KB | 2.23 KB |
@@ -15,11 +15,11 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | slotted (@microsoft/fast-element/slotted.js) | 4.66 KB | 1.81 KB | 1.59 KB |
 | volatile (@microsoft/fast-element/volatile.js) | 6.84 KB | 2.54 KB | 2.26 KB |
 | when (@microsoft/fast-element/when.js) | 1.88 KB | 731 B | 589 B |
-| html (@microsoft/fast-element/html.js) | 25.94 KB | 8.43 KB | 7.57 KB |
-| repeat (@microsoft/fast-element/repeat.js) | 29.84 KB | 9.45 KB | 8.52 KB |
+| html (@microsoft/fast-element/html.js) | 26.64 KB | 8.64 KB | 7.77 KB |
+| repeat (@microsoft/fast-element/repeat.js) | 30.54 KB | 9.66 KB | 8.71 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
-| enableHydration (@microsoft/fast-element/hydration.js) | 44.74 KB | 13.39 KB | 12.05 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 60.36 KB | 18.91 KB | 16.99 KB |
+| enableHydration (@microsoft/fast-element/hydration.js) | 45.49 KB | 13.62 KB | 12.26 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 61.07 KB | 19.12 KB | 17.13 KB |
 | ArrayObserver (@microsoft/fast-element/arrays.js) | 12.55 KB | 4.46 KB | 4.03 KB |
 | observerMap (@microsoft/fast-element/observer-map.js) | 21.96 KB | 7.73 KB | 6.97 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.31 KB | 5.41 KB | 4.88 KB |
diff --git a/packages/fast-element/docs/declarative/design.md b/packages/fast-element/docs/declarative/design.md
index c03fdbccb52..a6bde3f566c 100644
--- a/packages/fast-element/docs/declarative/design.md
+++ b/packages/fast-element/docs/declarative/design.md
@@ -242,7 +242,7 @@ packages/fast-element/
 │   ├── components/
 │   │   ├── schema.ts          # Shared Schema class + schemaRegistry
 │   │   └── definition-schema-transforms.ts # Definition-scoped schema transform storage
-│   └── declarative/
+│   ├── declarative/
 │       ├── index.ts           # Public declarative entrypoint implementation
 │       ├── interfaces.ts      # Message enum (error codes)
 │       ├── debug.ts           # Human-readable declarative debug messages
@@ -254,6 +254,9 @@ packages/fast-element/
 │       ├── observer-map-utilities.ts # Shared observer-map helpers
 │       ├── utilities.ts       # Declarative parsing helpers
 │       └── syntax.ts          # Syntax delimiter constants
+│   └── hydration/
+│       ├── markers.ts         # Default 3.x marker reader and marker strategy contract
+│       └── markers_v2.ts      # Opt-in 2.x indexed marker reader
 ├── scripts/
 │   └── declarative/           # Fixture build + webui integration scripts
 └── test/
@@ -320,6 +323,11 @@ Primary declarative exports intended for application code:
 | `Schema` | `@microsoft/fast-element/schema.js` JSON schema builder that records binding paths discovered during template parsing. Each instance owns its own schema map and registers itself in the `schemaRegistry` for cross-element `$ref` resolution. |
 | `schemaRegistry` | `@microsoft/fast-element/schema.js` module-level `Map<string, Map<string, JSONSchema>>` that indexes schemas by custom element name. Used for cross-element lookups (e.g. nested component `$ref` resolution). |
 
+Hydration marker selection is available from
+`@microsoft/fast-element/hydration.js`. FAST Element 3.x data-free markers are
+the default; `enableHydration({ markers: v2 })` opts into the FAST Element 2.x
+indexed marker reader for staged server/client migrations.
+
 Primary map extension exports:
 
 | Export | Import path | Purpose |
@@ -701,6 +709,12 @@ With `declarativeTemplate()`, connection gating happens before platform registra
 
 ### Hydration marker formats
 
+`enableHydration()` uses the FAST Element 3.x data-free marker reader by
+default. The marker strategy is shared by target discovery and nested repeat
+hydration so a view uses one consistent format throughout its hydration walk.
+The optional `v2` strategy contains the legacy indexed-marker parsing logic and
+is selected with `enableHydration({ markers: v2 })`.
+
 **Content bindings** use HTML comments (data-free, matched by string equality):
 
 ```
diff --git a/packages/fast-element/docs/declarative/syntax.md b/packages/fast-element/docs/declarative/syntax.md
index f2f7fff4b9b..b23572e039c 100644
--- a/packages/fast-element/docs/declarative/syntax.md
+++ b/packages/fast-element/docs/declarative/syntax.md
@@ -97,6 +97,16 @@ enableHydration({
 When `StopHydration.never` is used, `enableHydration().whenHydrated()`
 intentionally remains pending because hydration has no global completion point.
 
+FAST Element 3.x data-free hydration markers are selected by default. Existing
+server output that uses FAST Element 2.x indexed markers can be hydrated by
+selecting the v2 marker reader:
+
+```typescript
+import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+
+enableHydration({ markers: v2 });
+```
+
 ## `observerMap`
 
 When the `observerMap()` extension is applied to an element definition,
diff --git a/packages/fast-element/src/components/enable-hydration.ts b/packages/fast-element/src/components/enable-hydration.ts
index fa72e066807..3b67af7e85f 100644
--- a/packages/fast-element/src/components/enable-hydration.ts
+++ b/packages/fast-element/src/components/enable-hydration.ts
@@ -1,4 +1,5 @@
 import { installHydrationDiagnostic } from "../hydration/diagnostics.js";
+import { installHydrationMarkers } from "../hydration/markers.js";
 import { ensureHydrationRuntime } from "../hydration/runtime.js";
 import type { Mutable } from "../interfaces.js";
 import { SourceLifetime } from "../observation/observable.js";
@@ -51,6 +52,10 @@ let hookInstalled = false;
  * `HydrationTargetElementError`. The debugger module is tree-shaken
  * out of production hydration bundles unless explicitly imported.
  *
+ * Pass `markers: v2` when hydrating server output that still uses FAST
+ * Element 2.x indexed hydration markers. FAST Element 3.x data-free markers
+ * remain the default.
+ *
  * @example
  * ```ts
  * import { enableHydration } from "@microsoft/fast-element/hydration.js";
@@ -77,12 +82,23 @@ let hookInstalled = false;
  * enableHydration({ debugger: hydrationDebugger() });
  * ```
  *
+ * @example FAST Element 2.x hydration markers
+ * ```ts
+ * import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+ *
+ * enableHydration({ markers: v2 });
+ * ```
+ *
  * @param options - Optional hydration behavior.
  * @public
  */
 export function enableHydration(options?: HydrationOptions): HydrationController {
     ensureHydrationRuntime();
 
+    if (options?.markers) {
+        installHydrationMarkers(options.markers);
+    }
+
     if (options?.debugger) {
         installHydrationDiagnostic(options.debugger.diagnostic);
     }
diff --git a/packages/fast-element/src/components/hydration-tracker.ts b/packages/fast-element/src/components/hydration-tracker.ts
index 82d1274c4be..e26ed9eb359 100644
--- a/packages/fast-element/src/components/hydration-tracker.ts
+++ b/packages/fast-element/src/components/hydration-tracker.ts
@@ -1,4 +1,5 @@
 import type { HydrationDebugger } from "../hydration/hydration-debugger.js";
+import type { HydrationMarkers } from "../hydration/markers.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
 
 /**
@@ -27,6 +28,15 @@ export type StopHydration = (typeof StopHydration)[keyof typeof StopHydration];
  * @public
  */
 export interface HydrationOptions {
+    /**
+     * The marker format used by the server-rendered HTML.
+     * The selected format applies to all subsequent hydration on the page;
+     * later calls that omit this option retain the current selection.
+     *
+     * @defaultValue FAST Element 3.x data-free markers
+     */
+    markers?: HydrationMarkers;
+
     /**
      * Indicates when the hydration hook should stop handling new
      * prerendered elements.
diff --git a/packages/fast-element/src/components/hydration.pw.spec.ts b/packages/fast-element/src/components/hydration.pw.spec.ts
index 97dda986813..ed913ead0c0 100644
--- a/packages/fast-element/src/components/hydration.pw.spec.ts
+++ b/packages/fast-element/src/components/hydration.pw.spec.ts
@@ -451,54 +451,215 @@ test.describe("The prerendered content optimization", () => {
         expect(result.spanCount).toBe(3);
     });
 
-    test("does not recognize legacy hydration markers", async ({ page }) => {
+    test("uses v3 markers by default and recognizes v2 markers only through the v2 reader", async ({
+        page,
+    }) => {
         await page.goto("/");
 
         const result = await page.evaluate(async () => {
             const {
                 HydrationMarkup,
+                v2,
                 // @ts-expect-error: Client module.
             } = await import("/main.js");
 
-            const element = document.createElement("div");
-            element.setAttribute("data-fe-b", "0 1");
-            element.setAttribute("data-fe-b-2", "");
-            element.setAttribute("data-fe-c-3-2", "");
+            const defaultElement = document.createElement("div");
+            defaultElement.setAttribute("data-fe-b", "0 1");
+            defaultElement.setAttribute("data-fe-b-2", "");
+            defaultElement.setAttribute("data-fe-c-3-2", "");
+
+            const v2Element = document.createElement("div");
+            v2Element.setAttribute("data-fe-b", "0 1");
+            const v2Attributes = v2.resolveAttributeBindings(v2Element, 2, 2);
+            v2Attributes?.cleanup?.();
 
             return {
-                attributeCount: HydrationMarkup.parseAttributeBindingCount(element),
-                contentEnd: HydrationMarkup.isContentBindingEndMarker(
-                    "fe-b$$end$$0$$scope$$fe-b",
-                ),
-                contentStart: HydrationMarkup.isContentBindingStartMarker(
-                    "fe-b$$start$$0$$scope$$fe-b",
-                ),
-                elementEnd: HydrationMarkup.isElementBoundaryEndMarker(
-                    document.createComment("fe-eb$$end$$element$$fe-eb"),
-                ),
-                elementStart: HydrationMarkup.isElementBoundaryStartMarker(
-                    document.createComment("fe-eb$$start$$element$$fe-eb"),
-                ),
-                repeatEnd: HydrationMarkup.isRepeatViewEndMarker(
-                    "fe-repeat$$end$$0$$fe-repeat",
-                ),
-                repeatStart: HydrationMarkup.isRepeatViewStartMarker(
-                    "fe-repeat$$start$$0$$fe-repeat",
-                ),
+                defaults: {
+                    attributeCount:
+                        HydrationMarkup.parseAttributeBindingCount(defaultElement),
+                    contentEnd: HydrationMarkup.isContentBindingEndMarker(
+                        "fe-b$$end$$0$$scope$$fe-b",
+                    ),
+                    contentStart: HydrationMarkup.isContentBindingStartMarker(
+                        "fe-b$$start$$0$$scope$$fe-b",
+                    ),
+                    elementEnd: HydrationMarkup.isElementBoundaryEndMarker(
+                        document.createComment("fe-eb$$end$$element$$fe-eb"),
+                    ),
+                    elementStart: HydrationMarkup.isElementBoundaryStartMarker(
+                        document.createComment("fe-eb$$start$$element$$fe-eb"),
+                    ),
+                    repeatEnd: HydrationMarkup.isRepeatViewEndMarker(
+                        "fe-repeat$$end$$0$$fe-repeat",
+                    ),
+                    repeatStart: HydrationMarkup.isRepeatViewStartMarker(
+                        "fe-repeat$$start$$0$$fe-repeat",
+                    ),
+                },
+                v2: {
+                    attributeIndices: v2Attributes?.factoryIndices,
+                    attributeMarkersRemoved: v2Element.getAttributeNames().length === 0,
+                    contentEnd: v2.isContentBindingEndMarker("fe-b$$end$$0$$scope$$fe-b"),
+                    contentStart: v2.isContentBindingStartMarker(
+                        "fe-b$$start$$0$$scope$$fe-b",
+                    ),
+                    elementEnd: v2.isElementBoundaryEndMarker(
+                        document.createComment("fe-eb$$end$$element$$fe-eb"),
+                    ),
+                    elementStart: v2.isElementBoundaryStartMarker(
+                        document.createComment("fe-eb$$start$$element$$fe-eb"),
+                    ),
+                    repeatEnd: v2.isRepeatViewEndMarker("fe-repeat$$end$$0$$fe-repeat"),
+                    repeatStart: v2.isRepeatViewStartMarker(
+                        "fe-repeat$$start$$0$$fe-repeat",
+                    ),
+                },
             };
         });
 
         expect(result).toEqual({
-            attributeCount: null,
-            contentEnd: false,
-            contentStart: false,
-            elementEnd: false,
-            elementStart: false,
-            repeatEnd: false,
-            repeatStart: false,
+            defaults: {
+                attributeCount: null,
+                contentEnd: false,
+                contentStart: false,
+                elementEnd: false,
+                elementStart: false,
+                repeatEnd: false,
+                repeatStart: false,
+            },
+            v2: {
+                attributeIndices: [2, 3],
+                attributeMarkersRemoved: true,
+                contentEnd: true,
+                contentStart: true,
+                elementEnd: true,
+                elementStart: true,
+                repeatEnd: true,
+                repeatStart: true,
+            },
         });
     });
 
+    test("hydrates legacy indexed repeat markers when configured", async ({ page }) => {
+        await page.goto("/");
+
+        const element = await page.evaluateHandle(async () => {
+            const {
+                enableHydration,
+                FASTElement,
+                FASTElementDefinition,
+                html,
+                repeat,
+                uniqueElementName,
+                v2,
+                // @ts-expect-error: Client module.
+            } = await import("/main.js");
+
+            enableHydration({ markers: v2 });
+            const name = uniqueElementName();
+
+            class TestElement extends FASTElement {
+                items = ["one", "two"];
+
+                static definition = {
+                    name,
+                    template: html<TestElement>`
+                        ${repeat((x: { items: any }) => x.items, html<string>`<span>${(x: any) => x}</span>`)}
+                    `,
+                };
+            }
+
+            await (await FASTElementDefinition.compose(TestElement)).define();
+
+            const container = document.createElement("div");
+            document.body.appendChild(container);
+            (container as any).setHTMLUnsafe(
+                `<${name}><template shadowrootmode="open"><!--fe-b$$start$$0$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat--><span><!--fe-b$$start$$0$$item-1$$fe-b-->server-one<!--fe-b$$end$$0$$item-1$$fe-b--></span><!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$0$$repeat-1$$fe-b--></template></${name}>`,
+            );
+
+            return container.firstElementChild;
+        });
+
+        const result = await element.evaluate(async (element: any) => {
+            await element.$fastController.isHydrated;
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            return {
+                text: element.shadowRoot?.textContent?.replace(/\s+/g, "") ?? "",
+                spanCount: element.shadowRoot?.querySelectorAll("span").length ?? 0,
+            };
+        });
+
+        expect(result.text).toBe("onetwo");
+        expect(result.spanCount).toBe(2);
+    });
+
+    test("hydrates legacy indexed attribute markers when configured", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const element = await page.evaluateHandle(async () => {
+            const {
+                enableHydration,
+                FASTElement,
+                FASTElementDefinition,
+                html,
+                ref,
+                uniqueElementName,
+                v2,
+                // @ts-expect-error: Client module.
+            } = await import("/main.js");
+
+            enableHydration({ markers: v2 });
+            const name = uniqueElementName();
+
+            class TestElement extends FASTElement {
+                count = 0;
+                disabled = false;
+                input!: HTMLInputElement;
+
+                static definition = {
+                    name,
+                    template: html<TestElement>`
+                        <input ${ref("input")}>
+                        <button
+                            ?disabled=${(x: TestElement) => x.disabled}
+                            @click=${(x: TestElement) => x.count++}
+                        >
+                            Increment
+                        </button>
+                    `,
+                };
+            }
+
+            await (await FASTElementDefinition.compose(TestElement)).define();
+
+            const container = document.createElement("div");
+            document.body.appendChild(container);
+            (container as any).setHTMLUnsafe(
+                `<${name}><template shadowrootmode="open"><input data-fe-b-0><button data-fe-c-1-2>Increment</button></template></${name}>`,
+            );
+
+            return container.firstElementChild;
+        });
+
+        const result = await element.evaluate(async (element: any) => {
+            await element.$fastController.isHydrated;
+            await new Promise(resolve => requestAnimationFrame(resolve));
+            element.shadowRoot!.querySelector("button")!.click();
+
+            return {
+                count: element.count,
+                inputResolved:
+                    element.input === element.shadowRoot!.querySelector("input"),
+            };
+        });
+
+        expect(result.count).toBe(1);
+        expect(result.inputResolved).toBe(true);
+    });
+
     test("should remove extra repeat ranges when SSR rendered more items", async ({
         page,
     }) => {
diff --git a/packages/fast-element/src/components/hydration.ts b/packages/fast-element/src/components/hydration.ts
index a2d4c9446e8..20d000e8751 100644
--- a/packages/fast-element/src/components/hydration.ts
+++ b/packages/fast-element/src/components/hydration.ts
@@ -1,5 +1,3 @@
-import { Message } from "../interfaces.js";
-import { FAST } from "../platform.js";
 import type {
     ContentTemplate,
     HydratableContentTemplate,
@@ -13,116 +11,7 @@ import type {
     SyntheticViewTemplate,
 } from "../templating/template.js";
 
-/**
- * Data-free sequential hydration markers.
- *
- * All markers use the `fe:` prefix to namespace them to FAST Element. The closing
- * marker uses `/` following HTML/XML convention. Markers carry zero
- * embedded data — the hydration walker derives factory-to-node mappings
- * by maintaining a sequential pointer through the factories array.
- *
- * Content binding markers bracket text/template content:
- *   <!--fe:b--> ...content... <!--fe:/b-->
- *
- * Repeat item markers bracket each repeated item:
- *   <!--fe:r--> ...item... <!--fe:/r-->
- *
- * Element boundary markers demarcate nested custom elements:
- *   <!--fe:e--> ...shadow content... <!--fe:/e-->
- *
- * Attribute bindings use a single `data-fe` attribute whose value is
- * the count of attribute binding factories targeting the element:
- *   <div data-fe="3"> (3 attribute bindings)
- */
-
-function isComment(node: Node): node is Comment {
-    return node && node.nodeType === Node.COMMENT_NODE;
-}
-
-/**
- * Markup utilities to aid in template hydration.
- * @internal
- */
-export const HydrationMarkup = Object.freeze({
-    // Single attribute marker format (count only)
-    attributeMarkerName: "data-fe",
-
-    // Content binding markers (no arguments)
-    contentBindingStartMarker(): string {
-        return "fe:b";
-    },
-    contentBindingEndMarker(): string {
-        return "fe:/b";
-    },
-
-    // Repeat item markers (no arguments)
-    repeatStartMarker(): string {
-        return "fe:r";
-    },
-    repeatEndMarker(): string {
-        return "fe:/r";
-    },
-
-    // Element boundary markers (no arguments)
-    elementBoundaryStartMarker(): string {
-        return "fe:e";
-    },
-    elementBoundaryEndMarker(): string {
-        return "fe:/e";
-    },
-
-    // Detection — simple string equality
-    isContentBindingStartMarker(data: string): boolean {
-        return data === "fe:b";
-    },
-    isContentBindingEndMarker(data: string): boolean {
-        return data === "fe:/b";
-    },
-    isRepeatViewStartMarker(data: string): boolean {
-        return data === "fe:r";
-    },
-    isRepeatViewEndMarker(data: string): boolean {
-        return data === "fe:/r";
-    },
-    isElementBoundaryStartMarker(node: Node): boolean {
-        return isComment(node) && node.data === "fe:e";
-    },
-    isElementBoundaryEndMarker(node: Node): boolean {
-        return isComment(node) && node.data === "fe:/e";
-    },
-
-    /**
-     * Returns the count of attribute bindings on the element, or null
-     * if no attribute binding marker is present.
-     *
-     * Parses the `data-fe="N"` attribute format where N is the count
-     * of attribute binding factories targeting this element.
-     */
-    parseAttributeBindingCount(node: Element): number | null {
-        const attr = node.getAttribute(this.attributeMarkerName);
-        if (attr === null) {
-            return null;
-        }
-
-        const trimmed = attr.trim();
-
-        if (!/^\d+$/.test(trimmed)) {
-            throw FAST.error(Message.invalidHydrationAttributeMarker, {
-                value: attr,
-            });
-        }
-
-        const count = parseInt(trimmed, 10);
-
-        if (count < 1) {
-            throw FAST.error(Message.invalidHydrationAttributeMarker, {
-                value: attr,
-            });
-        }
-
-        return count;
-    },
-});
+export { HydrationMarkup } from "../hydration/markers.js";
 
 /**
  * @internal
diff --git a/packages/fast-element/src/hydration/exports.ts b/packages/fast-element/src/hydration/exports.ts
index 4a3d662c718..ff07fdfe08c 100644
--- a/packages/fast-element/src/hydration/exports.ts
+++ b/packages/fast-element/src/hydration/exports.ts
@@ -68,6 +68,8 @@ export type {
 } from "./diagnostics.js";
 export type { HydrationDebugger } from "./hydration-debugger.js";
 export { hydrationDebugger } from "./hydration-debugger.js";
+export type { HydrationMarkers } from "./markers.js";
+export { v2 } from "./markers_v2.js";
 export type {
     ViewBehaviorBoundaries,
     ViewBoundaries,
diff --git a/packages/fast-element/src/hydration/markers.ts b/packages/fast-element/src/hydration/markers.ts
new file mode 100644
index 00000000000..6b8e1aba025
--- /dev/null
+++ b/packages/fast-element/src/hydration/markers.ts
@@ -0,0 +1,203 @@
+import { Message } from "../interfaces.js";
+import { FAST } from "../platform.js";
+
+const hydrationMarkersBrand: unique symbol = Symbol();
+
+/**
+ * Identifies a supported hydration marker format.
+ * @public
+ */
+export interface HydrationMarkers {
+    readonly [hydrationMarkersBrand]: true;
+}
+
+/**
+ * Resolves hydration marker metadata to compiled factory indices.
+ * @internal
+ */
+export interface HydrationMarkerResolution {
+    factoryIndices: readonly number[];
+    nextFactoryPointer: number;
+    cleanup?(): void;
+}
+
+/**
+ * Defines how server-rendered hydration markers are interpreted.
+ * @internal
+ */
+export interface HydrationMarkerStrategy extends HydrationMarkers {
+    expectedContentAfterStartMarker: string;
+    expectedContentEndMarker: string;
+    expectedElementBoundaryEndMarker: string;
+    resolveAttributeBindings(
+        node: Element,
+        factoryPointer: number,
+        hydrationIndexOffset: number,
+    ): HydrationMarkerResolution | null;
+    resolveContentBinding(
+        data: string,
+        factoryPointer: number,
+        hydrationIndexOffset: number,
+    ): HydrationMarkerResolution | null;
+    isContentBindingStartMarker(data: string): boolean;
+    isContentBindingEndMarker(data: string): boolean;
+    isRepeatViewStartMarker(data: string): boolean;
+    isRepeatViewEndMarker(data: string): boolean;
+    isElementBoundaryStartMarker(node: Node): boolean;
+    isElementBoundaryEndMarker(node: Node): boolean;
+}
+
+type HydrationMarkerImplementation = Omit<
+    HydrationMarkerStrategy,
+    typeof hydrationMarkersBrand
+>;
+
+const markerStrategies = new WeakMap<HydrationMarkers, HydrationMarkerStrategy>();
+
+/**
+ * Creates a registered hydration marker strategy.
+ * @internal
+ */
+export function createHydrationMarkers<
+    TImplementation extends HydrationMarkerImplementation,
+>(implementation: TImplementation): HydrationMarkers & TImplementation {
+    const markers = Object.freeze({
+        ...implementation,
+        [hydrationMarkersBrand]: true as const,
+    });
+    markerStrategies.set(markers, markers);
+    return markers;
+}
+
+function isComment(node: Node): node is Comment {
+    return node.nodeType === Node.COMMENT_NODE;
+}
+
+function parseAttributeBindingCount(node: Element): number | null {
+    const attr = node.getAttribute("data-fe");
+    if (attr === null) {
+        return null;
+    }
+
+    const trimmed = attr.trim();
+
+    if (!/^\d+$/.test(trimmed)) {
+        throw FAST.error(Message.invalidHydrationAttributeMarker, {
+            value: attr,
+        });
+    }
+
+    const count = parseInt(trimmed, 10);
+
+    if (count < 1) {
+        throw FAST.error(Message.invalidHydrationAttributeMarker, {
+            value: attr,
+        });
+    }
+
+    return count;
+}
+
+/**
+ * Data-free sequential hydration markers used by FAST Element 3.x.
+ * @internal
+ */
+export const HydrationMarkup = createHydrationMarkers({
+    attributeMarkerName: "data-fe",
+    expectedContentAfterStartMarker:
+        "content following `<!--fe:b-->` content binding marker",
+    expectedContentEndMarker: "matching `<!--fe:/b-->` content binding close marker",
+    expectedElementBoundaryEndMarker:
+        "matching `<!--fe:/e-->` element boundary close marker",
+
+    contentBindingStartMarker(): string {
+        return "fe:b";
+    },
+    contentBindingEndMarker(): string {
+        return "fe:/b";
+    },
+    repeatStartMarker(): string {
+        return "fe:r";
+    },
+    repeatEndMarker(): string {
+        return "fe:/r";
+    },
+    elementBoundaryStartMarker(): string {
+        return "fe:e";
+    },
+    elementBoundaryEndMarker(): string {
+        return "fe:/e";
+    },
+    parseAttributeBindingCount,
+    resolveAttributeBindings(
+        node: Element,
+        factoryPointer: number,
+        _hydrationIndexOffset: number,
+    ): HydrationMarkerResolution | null {
+        const count = parseAttributeBindingCount(node);
+        if (count === null) {
+            return null;
+        }
+
+        const factoryIndices = Array.from(
+            { length: count },
+            (_, index) => factoryPointer + index,
+        );
+
+        return {
+            factoryIndices,
+            nextFactoryPointer: factoryPointer + count,
+            cleanup: () => node.removeAttribute("data-fe"),
+        };
+    },
+    resolveContentBinding(
+        data: string,
+        factoryPointer: number,
+        _hydrationIndexOffset: number,
+    ): HydrationMarkerResolution | null {
+        if (data !== "fe:b") {
+            return null;
+        }
+
+        return {
+            factoryIndices: [factoryPointer],
+            nextFactoryPointer: factoryPointer + 1,
+        };
+    },
+    isContentBindingStartMarker(data: string): boolean {
+        return data === "fe:b";
+    },
+    isContentBindingEndMarker(data: string): boolean {
+        return data === "fe:/b";
+    },
+    isRepeatViewStartMarker(data: string): boolean {
+        return data === "fe:r";
+    },
+    isRepeatViewEndMarker(data: string): boolean {
+        return data === "fe:/r";
+    },
+    isElementBoundaryStartMarker(node: Node): boolean {
+        return isComment(node) && node.data === "fe:e";
+    },
+    isElementBoundaryEndMarker(node: Node): boolean {
+        return isComment(node) && node.data === "fe:/e";
+    },
+});
+
+let activeHydrationMarkers = markerStrategies.get(HydrationMarkup)!;
+
+/**
+ * Selects the hydration marker format used by hydratable views.
+ * @internal
+ */
+export function installHydrationMarkers(markers: HydrationMarkers): void {
+    activeHydrationMarkers = markerStrategies.get(markers)!;
+}
+
+/**
+ * Gets the hydration marker format used by hydratable views.
+ * @internal
+ */
+export function getHydrationMarkers(): HydrationMarkerStrategy {
+    return activeHydrationMarkers;
+}
diff --git a/packages/fast-element/src/hydration/markers_v2.ts b/packages/fast-element/src/hydration/markers_v2.ts
new file mode 100644
index 00000000000..7f48534319a
--- /dev/null
+++ b/packages/fast-element/src/hydration/markers_v2.ts
@@ -0,0 +1,175 @@
+import { Message } from "../interfaces.js";
+import { FAST } from "../platform.js";
+import {
+    createHydrationMarkers,
+    type HydrationMarkerResolution,
+    type HydrationMarkers,
+} from "./markers.js";
+
+const bindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const bindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const repeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
+const repeatViewEndMarker = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/;
+const elementBoundaryStartMarker = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/;
+const elementBoundaryEndMarker = /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
+const attributeMarkerName = "data-fe-b";
+const compactAttributeMarkerName = "data-fe-c";
+
+function isComment(node: Node): node is Comment {
+    return node.nodeType === Node.COMMENT_NODE;
+}
+
+function parseMarkerIndex(pattern: RegExp, data: string): number | null {
+    const match = pattern.exec(data);
+    return match === null ? null : Number(match[1]);
+}
+
+function parseAttributeBindingIndices(node: Element): number[] | null {
+    const indices: number[] = [];
+    const attr = node.getAttribute(attributeMarkerName);
+
+    if (attr !== null) {
+        for (const value of attr.trim().split(/\s+/)) {
+            if (value === "") {
+                continue;
+            }
+
+            const index = Number(value);
+
+            if (!Number.isInteger(index) || index < 0) {
+                throw FAST.error(Message.invalidHydrationAttributeMarker, {
+                    value: attr,
+                });
+            }
+
+            indices.push(index);
+        }
+    }
+
+    const enumeratedPrefix = `${attributeMarkerName}-`;
+    const compactPrefix = `${compactAttributeMarkerName}-`;
+
+    for (const name of node.getAttributeNames()) {
+        if (name.startsWith(enumeratedPrefix)) {
+            const index = Number(name.slice(enumeratedPrefix.length));
+
+            if (!Number.isInteger(index) || index < 0) {
+                throw FAST.error(Message.invalidHydrationAttributeMarker, {
+                    value: name,
+                });
+            }
+
+            indices.push(index);
+        } else if (name.startsWith(compactPrefix)) {
+            const [start, count] = name
+                .slice(compactPrefix.length)
+                .split("-")
+                .map(value => Number(value));
+
+            if (
+                !Number.isInteger(start) ||
+                !Number.isInteger(count) ||
+                start < 0 ||
+                count < 1
+            ) {
+                throw FAST.error(Message.invalidHydrationAttributeMarker, {
+                    value: name,
+                });
+            }
+
+            for (let i = 0; i < count; i++) {
+                indices.push(start + i);
+            }
+        }
+    }
+
+    return indices.length === 0 ? null : indices;
+}
+
+function removeAttributeBindingMarkers(node: Element): void {
+    node.removeAttribute(attributeMarkerName);
+
+    for (const name of node.getAttributeNames()) {
+        if (
+            name.startsWith(`${attributeMarkerName}-`) ||
+            name.startsWith(`${compactAttributeMarkerName}-`)
+        ) {
+            node.removeAttribute(name);
+        }
+    }
+}
+
+/**
+ * FAST Element 2.x indexed hydration markers.
+ *
+ * @example
+ * ```ts
+ * import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+ *
+ * enableHydration({ markers: v2 });
+ * ```
+ * @public
+ */
+export const v2: HydrationMarkers = createHydrationMarkers({
+    expectedContentAfterStartMarker:
+        "content following a `fe-b$$start$$...$$fe-b` content binding marker",
+    expectedContentEndMarker:
+        "matching `fe-b$$end$$...$$fe-b` content binding close marker",
+    expectedElementBoundaryEndMarker:
+        "matching `fe-eb$$end$$...$$fe-eb` element boundary close marker",
+    resolveAttributeBindings(
+        node: Element,
+        factoryPointer: number,
+        hydrationIndexOffset: number,
+    ): HydrationMarkerResolution | null {
+        const indices = parseAttributeBindingIndices(node);
+        if (indices === null) {
+            return null;
+        }
+
+        const factoryIndices = indices.map(index => index + hydrationIndexOffset);
+        return {
+            factoryIndices,
+            nextFactoryPointer: Math.max(
+                factoryPointer,
+                ...factoryIndices.map(index => index + 1),
+            ),
+            cleanup: () => removeAttributeBindingMarkers(node),
+        };
+    },
+    resolveContentBinding(
+        data: string,
+        factoryPointer: number,
+        hydrationIndexOffset: number,
+    ): HydrationMarkerResolution | null {
+        const index = parseMarkerIndex(bindingStartMarker, data);
+        if (index === null) {
+            return null;
+        }
+
+        const factoryIndex = index + hydrationIndexOffset;
+
+        return {
+            factoryIndices: [factoryIndex],
+            nextFactoryPointer: Math.max(factoryPointer, factoryIndex + 1),
+        };
+    },
+    isContentBindingStartMarker(data: string): boolean {
+        return bindingStartMarker.test(data);
+    },
+    isContentBindingEndMarker(data: string): boolean {
+        return bindingEndMarker.test(data);
+    },
+    isRepeatViewStartMarker(data: string): boolean {
+        return repeatViewStartMarker.test(data);
+    },
+    isRepeatViewEndMarker(data: string): boolean {
+        return repeatViewEndMarker.test(data);
+    },
+    isElementBoundaryStartMarker(node: Node): boolean {
+        return isComment(node) && elementBoundaryStartMarker.test(node.data);
+    },
+    isElementBoundaryEndMarker(node: Node): boolean {
+        return isComment(node) && elementBoundaryEndMarker.test(node.data);
+    },
+});
diff --git a/packages/fast-element/src/hydration/messages.ts b/packages/fast-element/src/hydration/messages.ts
index 93b4ce319d1..cd9b09f598b 100644
--- a/packages/fast-element/src/hydration/messages.ts
+++ b/packages/fast-element/src/hydration/messages.ts
@@ -41,10 +41,7 @@ export function formatAspect(label: string, sourceAspect: string | undefined): s
  * `"<span> with content binding"` or `"content binding"` when no tag is
  * associated with the binding factory.
  */
-export function formatExpectedTarget(
-    tagName: string | null,
-    aspect: string,
-): string {
+export function formatExpectedTarget(tagName: string | null, aspect: string): string {
     return tagName
         ? `<${tagName.toLowerCase()}> with ${aspect} binding`
         : `${aspect} binding`;
@@ -84,17 +81,6 @@ export function formatRichMismatchMessage(
     );
 }
 
-// -- Structural expectations (used by target-builder.ts throw sites) ---------
-
-export const expectedContentAfterStartMarker =
-    "content following `<!--fe:b-->` content binding marker";
-
-export const expectedContentEndMarker =
-    "matching `<!--fe:/b-->` content binding close marker";
-
-export const expectedElementBoundaryEndMarker =
-    "matching `<!--fe:/e-->` element boundary close marker";
-
 /**
  * Builds the "no more attribute bindings" structural expectation message
  * thrown when an element's `data-fe` count claims more attribute bindings
diff --git a/packages/fast-element/src/hydration/target-builder.ts b/packages/fast-element/src/hydration/target-builder.ts
index e2a281ae2f3..f8955ea2884 100644
--- a/packages/fast-element/src/hydration/target-builder.ts
+++ b/packages/fast-element/src/hydration/target-builder.ts
@@ -1,4 +1,3 @@
-import { HydrationMarkup } from "../components/hydration.js";
 import type {
     CompiledViewBehaviorFactory,
     ViewBehaviorFactory,
@@ -10,10 +9,8 @@ import {
     type HydrationMismatchActual,
     type HydrationMismatchExpectation,
 } from "./diagnostics.js";
+import { getHydrationMarkers, type HydrationMarkerStrategy } from "./markers.js";
 import {
-    expectedContentAfterStartMarker,
-    expectedContentEndMarker,
-    expectedElementBoundaryEndMarker,
     formatNoMoreAttributeBindings,
     formatNoMoreContentBindings,
 } from "./messages.js";
@@ -146,6 +143,7 @@ export function buildViewBindingTargets(
 
     const targets: ViewBehaviorTargets = {};
     const boundaries: ViewBehaviorBoundaries = {};
+    const markers = getHydrationMarkers();
 
     // Sequential factory pointer — skip host bindings at the start
     const hydrationIndexOffset = getHydrationIndexOffset(factories);
@@ -156,11 +154,16 @@ export function buildViewBindingTargets(
     while (node !== null) {
         switch (node.nodeType) {
             case Node.ELEMENT_NODE: {
-                const element = node as Element;
-                const count = HydrationMarkup.parseAttributeBindingCount(element);
-                if (count !== null) {
-                    for (let i = 0; i < count; i++) {
-                        const factory = factories[factoryPointer++];
+                const resolution = markers.resolveAttributeBindings(
+                    node as Element,
+                    factoryPointer,
+                    hydrationIndexOffset,
+                );
+                if (resolution !== null) {
+                    factoryPointer = resolution.nextFactoryPointer;
+
+                    for (const factoryIndex of resolution.factoryIndices) {
+                        const factory = factories[factoryIndex];
                         if (!factory) {
                             const expected = formatNoMoreAttributeBindings(
                                 factories.length,
@@ -180,21 +183,30 @@ export function buildViewBindingTargets(
                         }
                         targetFactory(factory, node, targets);
                     }
-                    element.removeAttribute(HydrationMarkup.attributeMarkerName);
+
+                    resolution.cleanup?.();
                 }
                 break;
             }
 
             case Node.COMMENT_NODE: {
                 const data = (node as Comment).data;
-                if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
+                if (markers.isElementBoundaryStartMarker(node)) {
                     // Element boundary — clear start marker and skip subtree
                     (node as Comment).data = "";
-                    skipToElementBoundaryEnd(walker, factories, node);
-                } else if (HydrationMarkup.isContentBindingStartMarker(data)) {
-                    // Content binding — consume next factory
-                    const factory = factories[factoryPointer++];
+                    skipToElementBoundaryEnd(walker, factories, node, markers);
+                } else {
+                    const resolution = markers.resolveContentBinding(
+                        data,
+                        factoryPointer,
+                        hydrationIndexOffset,
+                    );
+                    if (resolution === null) {
+                        break;
+                    }
 
+                    factoryPointer = resolution.nextFactoryPointer;
+                    const factory = factories[resolution.factoryIndices[0]];
                     if (!factory) {
                         const expected = formatNoMoreContentBindings(factories.length);
                         const result = getHydrationDiagnostic().formatStructuralError(
@@ -217,6 +229,7 @@ export function buildViewBindingTargets(
                         factories,
                         targets,
                         boundaries,
+                        markers,
                     );
                 }
                 break;
@@ -237,13 +250,14 @@ function targetContentBinding(
     factories: CompiledViewBehaviorFactory[],
     targets: ViewBehaviorTargets,
     boundaries: ViewBehaviorBoundaries,
+    markers: HydrationMarkerStrategy,
 ) {
     const nodes: Node[] = [];
     let current: Node | null = walker.nextSibling();
     node.data = "";
 
     if (current === null) {
-        const expected = expectedContentAfterStartMarker;
+        const expected = markers.expectedContentAfterStartMarker;
         const result = getHydrationDiagnostic().formatStructuralError(
             node,
             getHostName(node),
@@ -264,9 +278,9 @@ function targetContentBinding(
     let depth = 0;
     while (current !== null) {
         if (isComment(current)) {
-            if (HydrationMarkup.isContentBindingStartMarker(current.data)) {
+            if (markers.isContentBindingStartMarker(current.data)) {
                 depth++;
-            } else if (HydrationMarkup.isContentBindingEndMarker(current.data)) {
+            } else if (markers.isContentBindingEndMarker(current.data)) {
                 if (depth === 0) break;
                 depth--;
             }
@@ -276,7 +290,7 @@ function targetContentBinding(
     }
 
     if (current === null) {
-        const expected = expectedContentEndMarker;
+        const expected = markers.expectedContentEndMarker;
         const result = getHydrationDiagnostic().formatStructuralError(
             node,
             getHostName(node),
@@ -322,15 +336,16 @@ function skipToElementBoundaryEnd(
     walker: TreeWalker,
     factories: CompiledViewBehaviorFactory[],
     startNode: Node,
+    markers: HydrationMarkerStrategy,
 ) {
     let depth = 0;
     let current = walker.nextSibling();
     while (current !== null) {
         if (isComment(current)) {
-            if (HydrationMarkup.isElementBoundaryStartMarker(current)) {
+            if (markers.isElementBoundaryStartMarker(current)) {
                 current.data = "";
                 depth++;
-            } else if (HydrationMarkup.isElementBoundaryEndMarker(current)) {
+            } else if (markers.isElementBoundaryEndMarker(current)) {
                 if (depth === 0) {
                     current.data = "";
                     return;
@@ -342,7 +357,7 @@ function skipToElementBoundaryEnd(
         current = walker.nextSibling();
     }
 
-    const expected = expectedElementBoundaryEndMarker;
+    const expected = markers.expectedElementBoundaryEndMarker;
     const result = getHydrationDiagnostic().formatStructuralError(
         startNode,
         getHostName(startNode),
diff --git a/packages/fast-element/src/templating/repeat.ts b/packages/fast-element/src/templating/repeat.ts
index 66019b15447..908cd31ca9d 100644
--- a/packages/fast-element/src/templating/repeat.ts
+++ b/packages/fast-element/src/templating/repeat.ts
@@ -1,6 +1,7 @@
 import type { Binding, BindingDirective } from "../binding/binding.js";
 import { normalizeBinding } from "../binding/normalize.js";
-import { HydrationMarkup, isHydratable } from "../components/hydration.js";
+import { isHydratable } from "../components/hydration.js";
+import { getHydrationMarkers } from "../hydration/markers.js";
 import { ArrayObserver, type Sort, type Splice } from "../observation/arrays.js";
 import type { Notifier, Subscriber } from "../observation/notifier.js";
 import {
@@ -433,6 +434,7 @@ export class RepeatBehavior<TSource = any> implements ViewBehavior, Subscriber {
         const items = this.items;
         const itemCount = items.length;
         const views = (this.views = new Array(itemCount));
+        const markers = getHydrationMarkers();
 
         // First pass: collect all repeat marker pairs by walking backward.
         // Each entry tracks both the item content range and its SSR markers.
@@ -440,10 +442,7 @@ export class RepeatBehavior<TSource = any> implements ViewBehavior, Subscriber {
         let current: Node | null = this.location.previousSibling;
 
         while (current !== null) {
-            if (
-                !isCommentNode(current) ||
-                !HydrationMarkup.isRepeatViewEndMarker(current.data)
-            ) {
+            if (!isCommentNode(current) || !markers.isRepeatViewEndMarker(current.data)) {
                 current = current.previousSibling;
                 continue;
             }
@@ -464,9 +463,9 @@ export class RepeatBehavior<TSource = any> implements ViewBehavior, Subscriber {
             let depth = 0;
             while (start !== null) {
                 if (isCommentNode(start)) {
-                    if (HydrationMarkup.isRepeatViewEndMarker(start.data)) {
+                    if (markers.isRepeatViewEndMarker(start.data)) {
                         depth++;
-                    } else if (HydrationMarkup.isRepeatViewStartMarker(start.data)) {
+                    } else if (markers.isRepeatViewStartMarker(start.data)) {
                         if (depth === 0) {
                             const startMarker = start;
                             startMarker.data = "";
diff --git a/packages/fast-element/test/main.ts b/packages/fast-element/test/main.ts
index 4dc195ba11f..c36a4776a95 100644
--- a/packages/fast-element/test/main.ts
+++ b/packages/fast-element/test/main.ts
@@ -46,6 +46,7 @@ export {
 export { DOM, DOMAspect } from "../src/dom.js";
 export { DOMPolicy } from "../src/dom-policy.js";
 export { hydrationDebugger } from "../src/hydration/hydration-debugger.js";
+export { v2 } from "../src/hydration/markers_v2.js";
 export { Observable, observable } from "../src/observation/observable.js";
 export { Updates } from "../src/observation/update-queue.js";
 export { volatile } from "../src/observation/volatile.js";
diff --git a/sites/website/src/docs/3.x/migration-guide/hydration.md b/sites/website/src/docs/3.x/migration-guide/hydration.md
index f6a1fc4bdc7..1ca82ea378a 100644
--- a/sites/website/src/docs/3.x/migration-guide/hydration.md
+++ b/sites/website/src/docs/3.x/migration-guide/hydration.md
@@ -40,8 +40,8 @@ Key migration points:
 3. `needs-hydration` and `defer-hydration` are no longer required in rendered
    markup.
 4. Hydration callbacks are replaced by hydration promises.
-5. SSR hydration marker syntax changed; server and client FAST versions must
-   match.
+5. SSR hydration marker syntax changed. FAST Element 3.x markers are used by
+   default, with an explicit compatibility option for 2.x server output.
 
 ## Install hydration explicitly
 
@@ -201,14 +201,27 @@ If you used `@microsoft/fast-ssr` or custom SSR tooling, update the renderer to
 new marker format before loading the v3 client. If you use `@microsoft/fast-build`,
 upgrade it with `@microsoft/fast-element` and rebuild the output.
 
+For a staged migration where the server still emits FAST Element 2.x indexed
+markers, configure the v3 client explicitly:
+
+```ts
+import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+
+enableHydration({ markers: v2 });
+```
+
+The v2 reader accepts the old indexed comment and attribute marker formats. It
+does not make a FAST Element 2.x client understand 3.x output, and it does not
+provide compatibility for unrelated template or runtime differences.
+
 ## Keep renderer and client versions in sync
 
 Hydration succeeds when the HTML produced by the server matches the template and
 data that the client runtime sees during the element's first render. The
-renderer and client both rely on the same depth-first binding order and marker
-syntax. Deploy server-rendered output and client bundles together so old marker
-output is not hydrated by the v3 client, and the v3 marker output is not loaded
-with an older client.
+renderer and client both rely on compatible binding order and marker syntax.
+Deploy server-rendered output and client bundles together. When a staged
+migration requires a v3 client to hydrate v2 marker output, select
+`enableHydration({ markers: v2 })`; the default reader expects v3 markers.
 
 Do not minify or sanitize away FAST comments or `data-fe` attributes before the
 client loads. A missing `fe:/b` marker, an invalid `data-fe` count, or a changed
@@ -252,6 +265,8 @@ Hydration mismatch in <my-element>.
 | `deferHydrationAttribute` | `@microsoft/fast-element/hydration.js` | Legacy `defer-hydration` attribute string for compatibility code. |
 | `HydrationTracker` | `@microsoft/fast-element/hydration.js` | Standalone hydration lifecycle tracker class. |
 | `HydrationOptions` | `@microsoft/fast-element/hydration.js` | Type for hydration configuration options. |
+| `HydrationMarkers` | `@microsoft/fast-element/hydration.js` | Contract for selecting a hydration marker reader. |
+| `v2` | `@microsoft/fast-element/hydration.js` | Opt-in reader for FAST Element 2.x indexed hydration markers. |
 
 ## Migration checklist
 
diff --git a/sites/website/src/docs/3.x/resources/export-sizes.md b/sites/website/src/docs/3.x/resources/export-sizes.md
index 9c931c59196..d865a60e802 100644
--- a/sites/website/src/docs/3.x/resources/export-sizes.md
+++ b/sites/website/src/docs/3.x/resources/export-sizes.md
@@ -19,7 +19,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
-| CDN Rollup Bundle | 78.79 KB | 23.43 KB | 20.84 KB |
+| CDN Rollup Bundle | 77.51 KB | 23.14 KB | 20.53 KB |
 | FASTElement (@microsoft/fast-element/fast-element.js) | 23.11 KB | 7.12 KB | 6.41 KB |
 | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 290 B |
 | Observable (@microsoft/fast-element/observable.js) | 6.75 KB | 2.51 KB | 2.23 KB |
@@ -30,11 +30,11 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | slotted (@microsoft/fast-element/slotted.js) | 4.66 KB | 1.81 KB | 1.59 KB |
 | volatile (@microsoft/fast-element/volatile.js) | 6.84 KB | 2.54 KB | 2.26 KB |
 | when (@microsoft/fast-element/when.js) | 1.88 KB | 731 B | 589 B |
-| html (@microsoft/fast-element/html.js) | 27.91 KB | 8.98 KB | 8.04 KB |
-| repeat (@microsoft/fast-element/repeat.js) | 31.80 KB | 10.00 KB | 9.03 KB |
+| html (@microsoft/fast-element/html.js) | 26.64 KB | 8.64 KB | 7.77 KB |
+| repeat (@microsoft/fast-element/repeat.js) | 30.54 KB | 9.66 KB | 8.71 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
-| enableHydration (@microsoft/fast-element/hydration.js) | 46.71 KB | 13.94 KB | 12.51 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 62.33 KB | 19.49 KB | 17.46 KB |
+| enableHydration (@microsoft/fast-element/hydration.js) | 45.49 KB | 13.62 KB | 12.26 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 61.07 KB | 19.12 KB | 17.13 KB |
 | ArrayObserver (@microsoft/fast-element/arrays.js) | 12.55 KB | 4.46 KB | 4.03 KB |
 | observerMap (@microsoft/fast-element/observer-map.js) | 21.96 KB | 7.73 KB | 6.97 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.31 KB | 5.41 KB | 4.88 KB |

From 6d6e09c52d6085a5739e57abc2265515f31d970b Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:11:34 -0700
Subject: [PATCH 3/6] chore: use kebab-case for v2 hydration markers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: c66c1387-9a1b-4386-8d0f-a115ef5706db
---
 packages/fast-element/docs/declarative/design.md                | 2 +-
 packages/fast-element/src/hydration/exports.ts                  | 2 +-
 .../fast-element/src/hydration/{markers_v2.ts => markers-v2.ts} | 0
 packages/fast-element/test/main.ts                              | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/fast-element/src/hydration/{markers_v2.ts => markers-v2.ts} (100%)

diff --git a/packages/fast-element/docs/declarative/design.md b/packages/fast-element/docs/declarative/design.md
index a6bde3f566c..97cb160822f 100644
--- a/packages/fast-element/docs/declarative/design.md
+++ b/packages/fast-element/docs/declarative/design.md
@@ -256,7 +256,7 @@ packages/fast-element/
 │       └── syntax.ts          # Syntax delimiter constants
 │   └── hydration/
 │       ├── markers.ts         # Default 3.x marker reader and marker strategy contract
-│       └── markers_v2.ts      # Opt-in 2.x indexed marker reader
+│       └── markers-v2.ts      # Opt-in 2.x indexed marker reader
 ├── scripts/
 │   └── declarative/           # Fixture build + webui integration scripts
 └── test/
diff --git a/packages/fast-element/src/hydration/exports.ts b/packages/fast-element/src/hydration/exports.ts
index ff07fdfe08c..cf319b13a3b 100644
--- a/packages/fast-element/src/hydration/exports.ts
+++ b/packages/fast-element/src/hydration/exports.ts
@@ -69,7 +69,7 @@ export type {
 export type { HydrationDebugger } from "./hydration-debugger.js";
 export { hydrationDebugger } from "./hydration-debugger.js";
 export type { HydrationMarkers } from "./markers.js";
-export { v2 } from "./markers_v2.js";
+export { v2 } from "./markers-v2.js";
 export type {
     ViewBehaviorBoundaries,
     ViewBoundaries,
diff --git a/packages/fast-element/src/hydration/markers_v2.ts b/packages/fast-element/src/hydration/markers-v2.ts
similarity index 100%
rename from packages/fast-element/src/hydration/markers_v2.ts
rename to packages/fast-element/src/hydration/markers-v2.ts
diff --git a/packages/fast-element/test/main.ts b/packages/fast-element/test/main.ts
index c36a4776a95..1df45ac0d3e 100644
--- a/packages/fast-element/test/main.ts
+++ b/packages/fast-element/test/main.ts
@@ -46,7 +46,7 @@ export {
 export { DOM, DOMAspect } from "../src/dom.js";
 export { DOMPolicy } from "../src/dom-policy.js";
 export { hydrationDebugger } from "../src/hydration/hydration-debugger.js";
-export { v2 } from "../src/hydration/markers_v2.js";
+export { v2 } from "../src/hydration/markers-v2.js";
 export { Observable, observable } from "../src/observation/observable.js";
 export { Updates } from "../src/observation/update-queue.js";
 export { volatile } from "../src/observation/volatile.js";

From 3e6111586718f1df6dd85e50a1aa0c289d6f24a9 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:34:48 -0700
Subject: [PATCH 4/6] feat: generate opt-in v2 hydration markers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: c66c1387-9a1b-4386-8d0f-a115ef5706db
---
 ...-728386d6-f5fd-4ae6-bd08-91debe57ed45.json |   7 +
 ...-18fad60c-d54c-48ef-be11-88bbbada8c2e.json |   2 +-
 crates/microsoft-fast-build/DESIGN.md         |  18 +-
 crates/microsoft-fast-build/README.md         |  14 +-
 crates/microsoft-fast-build/src/attribute.rs  |   7 +-
 crates/microsoft-fast-build/src/config.rs     |   9 +
 crates/microsoft-fast-build/src/directive.rs  |  28 +--
 crates/microsoft-fast-build/src/hydration.rs  |  63 ++++--
 crates/microsoft-fast-build/src/node.rs       |  12 +-
 crates/microsoft-fast-build/src/streaming.rs  |  38 ++--
 crates/microsoft-fast-build/src/wasm.rs       |  34 ++-
 .../microsoft-fast-build/tests/hydration.rs   |  49 +++-
 packages/fast-build/DESIGN.md                 |  12 +-
 packages/fast-build/README.md                 |   6 +-
 packages/fast-build/bin/fast.js               |  11 +-
 packages/fast-build/test/config.test.js       |  63 ++++++
 packages/fast-build/test/wasm-stub.cjs        |   2 +
 packages/fast-element/DESIGN.md               |   2 +-
 packages/fast-element/README.md               |   7 +-
 .../fast-element/docs/declarative/design.md   |   6 +-
 .../fast-element/docs/declarative/syntax.md   |   7 +-
 .../src/components/enable-hydration.ts        |   6 +-
 .../src/components/hydration.pw.spec.ts       | 209 ------------------
 .../fast-element/src/hydration/exports.ts     |   2 +-
 .../fast-element/src/hydration/markers-v2.ts  |   6 +-
 .../declarative/fixtures/ecosystem/README.md  |   1 +
 .../ecosystem/hydration-markers-v2/entry.html |  14 ++
 .../fast-build.config.json                    |   7 +
 .../hydration-markers-v2.spec.ts              |  56 +++++
 .../ecosystem/hydration-markers-v2/index.html |  25 +++
 .../ecosystem/hydration-markers-v2/main.ts    |  31 +++
 .../ecosystem/hydration-markers-v2/state.json |   4 +
 .../hydration-markers-v2/templates.html       |   9 +
 packages/fast-element/test/main.ts            |   2 +-
 .../src/docs/3.x/migration-guide/hydration.md |  16 +-
 35 files changed, 462 insertions(+), 323 deletions(-)
 create mode 100644 change/@microsoft-fast-build-728386d6-f5fd-4ae6-bd08-91debe57ed45.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/entry.html
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/fast-build.config.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/index.html
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/main.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/state.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/templates.html

diff --git a/change/@microsoft-fast-build-728386d6-f5fd-4ae6-bd08-91debe57ed45.json b/change/@microsoft-fast-build-728386d6-f5fd-4ae6-bd08-91debe57ed45.json
new file mode 100644
index 00000000000..0ed007ad4fd
--- /dev/null
+++ b/change/@microsoft-fast-build-728386d6-f5fd-4ae6-bd08-91debe57ed45.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add a markers_v2 option for emitting FAST Element 2.x indexed hydration markers.",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json b/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
index 5669f711ea5..9bc31cce1dc 100644
--- a/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
+++ b/change/@microsoft-fast-element-18fad60c-d54c-48ef-be11-88bbbada8c2e.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "Add opt-in hydration support for FAST Element 2.x indexed markers.",
+  "comment": "Add an opt-in markers_v2 reader for FAST Element 2.x indexed hydration markers.",
   "packageName": "@microsoft/fast-element",
   "email": "7559015+janechu@users.noreply.github.com",
   "dependentChangeType": "none"
diff --git a/crates/microsoft-fast-build/DESIGN.md b/crates/microsoft-fast-build/DESIGN.md
index b2516fa7bdc..f1622d44bc1 100644
--- a/crates/microsoft-fast-build/DESIGN.md
+++ b/crates/microsoft-fast-build/DESIGN.md
@@ -48,10 +48,10 @@ render_template(template, state_str)
 | `content.rs` | `{{expr}}` and `{{{expr}}}` binding renderers, `html_escape` |
 | `attribute.rs` | Low-level HTML/attribute string parsing utilities + hydration attribute helpers; `strip_client_only_attrs` (shadow-DOM tags and nested element opening tags) |
 | `attribute_lookup.rs` | Static lookup tables mapping ARIA and HTML attribute names to their DOM property names |
-| `config.rs` | `RenderConfig` struct and `AttributeNameStrategy` enum — rendering configuration options |
+| `config.rs` | `RenderConfig` struct, `AttributeNameStrategy` enum, and `markers_v2` option — rendering configuration options |
 | `context.rs` | State value resolution: dot-path access, loop-variable scoping |
 | `expression.rs` | Boolean expression evaluator for `<f-when value="{{…}}">` |
-| `hydration.rs` | `HydrationScope` — binding index tracking and data-free marker generation per template scope |
+| `hydration.rs` | `HydrationScope` — binding index tracking and v3 data-free or opt-in v2 indexed marker generation per template scope |
 | `json.rs` | Hand-rolled JSON parser producing `JsonValue` |
 | `locator.rs` | `Locator` struct — maps element names to template strings; glob scanner; `<f-template>` parser. Stored template bodies are first run through `escape_code_sample_elements` so `{`/`}` characters and the angle brackets of FAST directive tags (`<f-when>`, `<f-repeat>`) inside `<code>` elements are entity-escaped and therefore not interpreted as binding delimiters or directives. Also captures the inner `<template>` element's attributes as **host attributes** for propagation onto the rendered host element opening tag. |
 | `code_escape.rs` | `escape_code_sample_elements` — auto-escape preprocessor used by both `renderer.rs` and `locator.rs`. Walks the HTML and, inside every `<code>` element (including nested ones and attribute values of descendants), replaces `{` → `&#123;` and `}` → `&#125;` so that binding-like syntax in code samples renders literally. Additionally rewrites the `<` / `>` of every FAST directive tag (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) it finds inside `<code>` as `&lt;` / `&gt;`, so authors can write directives literally without manual entity escaping; tag-name matching is case-insensitive. Real HTML elements (`<button>`) and custom elements (`<my-widget>`) inside `<code>` keep their angle brackets and continue to render as live DOM elements. The brace half of the escape mirrors the JavaScript-side `escapeBracesInCodeElements` in `@microsoft/fast-html`; the directive-tag angle escape is server-only because the DOM serializer re-encodes `<`/`>` in text content so the client never sees a raw directive tag inside `<code>`. Modeled on Microsoft WebUI's `webui-press` markdown renderer, which auto-escapes the same characters inside code spans and code fences |
@@ -83,7 +83,7 @@ The loop works like a cursor:
 2. Call `next_directive(template, pos, locator)` to find the earliest interesting position ahead.
 3. If nothing is found, append `template[pos..]` to output and break.
 4. Otherwise, append the literal text from `pos` up to the directive's start.
-5. Dispatch the directive to the appropriate handler (returns `(chunk, next_pos)`). In hydration mode, content bindings (`{{expr}}`, `{{{expr}}}`) are wrapped in `<!--fe:b-->VALUE<!--fe:/b-->` markers.
+5. Dispatch the directive to the appropriate handler (returns `(chunk, next_pos)`). In hydration mode, content bindings (`{{expr}}`, `{{{expr}}}`) are wrapped in the configured v3 data-free or v2 indexed markers.
 6. Append `chunk` and advance `pos` to `next_pos`.
 7. Repeat.
 
@@ -374,10 +374,10 @@ All render functions accept `config: Option<&RenderConfig>` as their last parame
 - `render_entry_template_stream_with_locator(template, state_str, locator, config)`
 - `render_entry_template_stream_with_locator_without_state(template, locator, config)`
 
-The streaming APIs return `Result<Vec<String>, RenderError>` and otherwise use the same configuration and state semantics as their non-streaming equivalents. The `*_without_state` APIs render with an empty object root state. In WASM, the state parameter is optional for `render`, `render_with_templates`, and `render_entry_with_templates`; omitted state also uses an empty object. The template-rendering WASM exports accept an `attribute_name_strategy` string parameter (`""`, `"none"`, or `"camelCase"`), and `render_entry_with_templates` accepts an optional fifth `stream` boolean:
+The streaming APIs return `Result<Vec<String>, RenderError>` and otherwise use the same configuration and state semantics as their non-streaming equivalents. The `*_without_state` APIs render with an empty object root state. In WASM, the state parameter is optional for `render`, `render_with_templates`, and `render_entry_with_templates`; omitted state also uses an empty object. The template-rendering WASM exports accept an `attribute_name_strategy` string parameter (`""`, `"none"`, or `"camelCase"`) and an optional `markers_v2` boolean. `render_entry_with_templates` also accepts an optional `stream` boolean:
 
-- `render_with_templates(entry, templates_json, state?, attribute_name_strategy?)`
-- `render_entry_with_templates(entry, templates_json, state?, attribute_name_strategy?, stream?)`
+- `render_with_templates(entry, templates_json, state?, attribute_name_strategy?, markers_v2?)`
+- `render_entry_with_templates(entry, templates_json, state?, attribute_name_strategy?, stream?, markers_v2?)`
 
 ---
 
@@ -542,8 +542,8 @@ Hand-rolled in `glob_match` → `match_segments` → `match_segment` → `match_
 | Export | Signature | Description |
 |--------|-----------|-------------|
 | `render` | `(entry: &str, state?: string) → String` | Render a template with no custom elements; omitted state is `{}` |
-| `render_with_templates` | `(entry: &str, templates_json: &str, state?: string, attribute_name_strategy?: string) → String` | Render a template with a pre-built `{name: content}` templates map using non-entry semantics; omitted state is `{}` |
-| `render_entry_with_templates` | `(entry: &str, templates_json: &str, state?: string, attribute_name_strategy?: string, stream?: bool) → String` | Render top-level entry HTML with a pre-built `{name: content}` templates map; omitted state is `{}`. When `stream` is `true`, returns a JSON array string of stream chunks instead of HTML. |
+| `render_with_templates` | `(entry: &str, templates_json: &str, state?: string, attribute_name_strategy?: string, markers_v2?: bool) → String` | Render a template with a pre-built `{name: content}` templates map using non-entry semantics; omitted state is `{}`. `markers_v2` selects indexed FAST Element 2.x hydration markers. |
+| `render_entry_with_templates` | `(entry: &str, templates_json: &str, state?: string, attribute_name_strategy?: string, stream?: bool, markers_v2?: bool) → String` | Render top-level entry HTML with a pre-built `{name: content}` templates map; omitted state is `{}`. When `stream` is `true`, returns a JSON array string of stream chunks instead of HTML. `markers_v2` selects indexed FAST Element 2.x hydration markers. |
 | `parse_f_templates` | `(html: &str) → String` | Parse `<f-template>` elements and return a JSON array |
 
 ### `parse_f_templates`
@@ -649,7 +649,7 @@ A hand-rolled recursive-descent parser. No external crates.
 
 **`Option<&mut HydrationScope>` threading.** The hydration context is an optional mutable parameter on `render_node` and all directive renderers. Passing `None` disables all hydration marker emission and keeps non-custom-element rendering identical to the pre-hydration behaviour. The public API always passes `None` at the top level; hydration is only activated inside `render_custom_element`.
 
-**Data-free hydration markers.** Comment markers carry only a type indicator and start/end flag (`<!--fe:b-->`, `<!--fe:/b-->`, `<!--fe:r-->`, `<!--fe:/r-->`). The FAST client pairs them by balanced depth counting and derives factory-to-node mappings from DFS traversal order. `HydrationScope` only tracks `binding_idx` for attribute binding counts; it does not carry marker names or scope IDs.
+**Hydration marker formats.** Comment markers are data-free by default (`<!--fe:b-->`, `<!--fe:/b-->`, `<!--fe:r-->`, `<!--fe:/r-->`). When `RenderConfig.markers_v2` is enabled, `HydrationScope` emits FAST Element 2.x indexed comment markers and `data-fe-b-N` / `data-fe-c-START-COUNT` attribute markers instead.
 
 **Atomic tag processing for attribute bindings.** When a plain HTML opening tag in the literal region contains `{{expr}}` attribute values, those values are resolved and `data-fe` is injected into the tag as a whole before `next_directive` ever sees them. This prevents the `{{expr}}` inside attributes from being mistaken for content bindings. The cost is that `next_directive` is called once extra per tag iteration, but tags are short and rare enough that this has no meaningful performance impact.
 
diff --git a/crates/microsoft-fast-build/README.md b/crates/microsoft-fast-build/README.md
index 703d5fa2ca4..5edeb3f8402 100644
--- a/crates/microsoft-fast-build/README.md
+++ b/crates/microsoft-fast-build/README.md
@@ -535,7 +535,8 @@ The `camelCase` strategy only applies to "plain" attributes. It does **not** aff
 use microsoft_fast_build::{RenderConfig, AttributeNameStrategy, render_template_with_locator};
 
 let config = RenderConfig::new()
-    .with_attribute_name_strategy(AttributeNameStrategy::CamelCase);
+    .with_attribute_name_strategy(AttributeNameStrategy::CamelCase)
+    .with_markers_v2(true);
 
 let result = render_template_with_locator(
     r#"<my-el foo-bar="hello"></my-el>"#,
@@ -554,7 +555,8 @@ const html = render_entry_with_templates(
     templatesJson,
     stateJson,
     "camelCase", // or "none"
-    false        // optional stream flag
+    false,       // optional stream flag
+    true         // optional markers_v2 flag
 );
 
 const chunksJson = render_entry_with_templates(
@@ -562,11 +564,12 @@ const chunksJson = render_entry_with_templates(
     templatesJson,
     stateJson,
     "camelCase",
+    true,
     true
 );
 ```
 
-Use `render_with_templates` for the original non-entry template-rendering semantics; use `render_entry_with_templates` for top-level entry HTML rendering. Passing `true` as the optional fifth argument switches `render_entry_with_templates` to stream mode and returns a JSON array string of HTML chunks; omitted or `false` returns normal HTML.
+Use `render_with_templates` for the original non-entry template-rendering semantics; use `render_entry_with_templates` for top-level entry HTML rendering. Passing `true` as the optional fifth argument switches `render_entry_with_templates` to stream mode and returns a JSON array string of HTML chunks; omitted or `false` returns normal HTML. Passing `true` as the optional sixth `markers_v2` argument emits FAST Element 2.x indexed hydration markers.
 
 Passing `"none"` or `""` as the strategy uses the default behaviour.
 
@@ -576,6 +579,11 @@ Passing `"none"` or `""` as the strategy uses the default behaviour.
 
 When a custom element's shadow template is rendered, the renderer emits **hydration markers** so the FAST client runtime can efficiently locate and patch DOM nodes without a full diff.
 
+FAST Element 3.x data-free markers are emitted by default. Set
+`RenderConfig::with_markers_v2(true)` in Rust, or pass the `markers_v2` WASM/CLI
+option, to emit FAST Element 2.x indexed markers for a client configured with
+`enableHydration({ markers: markers_v2 })`.
+
 ### Content binding markers
 
 Each `{{expr}}` or `{{{expr}}}` text binding is wrapped in data-free HTML comment markers:
diff --git a/crates/microsoft-fast-build/src/attribute.rs b/crates/microsoft-fast-build/src/attribute.rs
index 5b1e21879b9..73f2ba68734 100644
--- a/crates/microsoft-fast-build/src/attribute.rs
+++ b/crates/microsoft-fast-build/src/attribute.rs
@@ -409,10 +409,9 @@ pub(crate) fn strip_client_only_attrs(tag: &str) -> String {
     out
 }
 
-/// Insert `data-fe="N"` as an attribute just before the closing `>` or `/>`.
-/// N is the count of attribute binding factories targeting this element.
-pub(crate) fn inject_count_marker(tag: &str, count: usize) -> String {
-    let marker = format!(" data-fe=\"{}\"", count);
+/// Insert a hydration marker attribute just before the closing `>` or `/>`.
+pub(crate) fn inject_hydration_marker(tag: &str, marker: &str) -> String {
+    let marker = format!(" {}", marker);
     let trimmed = tag.trim_end();
     if trimmed.ends_with("/>") {
         let base = trimmed[..trimmed.len() - 2].trim_end();
diff --git a/crates/microsoft-fast-build/src/config.rs b/crates/microsoft-fast-build/src/config.rs
index d354acb6d76..dc149c3739e 100644
--- a/crates/microsoft-fast-build/src/config.rs
+++ b/crates/microsoft-fast-build/src/config.rs
@@ -24,6 +24,9 @@ pub enum AttributeNameStrategy {
 pub struct RenderConfig {
     /// Strategy for mapping HTML attribute names to state property names.
     pub attribute_name_strategy: AttributeNameStrategy,
+    /// Emit FAST Element 2.x indexed hydration markers instead of the
+    /// default FAST Element 3.x data-free markers.
+    pub markers_v2: bool,
 }
 
 impl RenderConfig {
@@ -37,4 +40,10 @@ impl RenderConfig {
         self.attribute_name_strategy = strategy;
         self
     }
+
+    /// Configure whether FAST Element 2.x indexed hydration markers are emitted.
+    pub fn with_markers_v2(mut self, markers_v2: bool) -> Self {
+        self.markers_v2 = markers_v2;
+        self
+    }
 }
diff --git a/crates/microsoft-fast-build/src/directive.rs b/crates/microsoft-fast-build/src/directive.rs
index b30ffe2669c..6f6d01419fd 100644
--- a/crates/microsoft-fast-build/src/directive.rs
+++ b/crates/microsoft-fast-build/src/directive.rs
@@ -95,11 +95,11 @@ pub fn render_when(
         })?;
 
     let output = if let Some(hy) = hydration {
-        hy.next_binding();
-        let start = hy.content_start_marker();
-        let end = hy.content_end_marker();
+        let index = hy.next_binding();
+        let start = hy.content_start_marker(index);
+        let end = hy.content_end_marker(index);
         let inner_content = if evaluate(&expr, root, loop_vars) {
-            let mut child_scope = HydrationScope::new();
+            let mut child_scope = HydrationScope::new(config.markers_v2);
             render_node(&inner, root, loop_vars, locator, Some(&mut child_scope), false, config)?
         } else {
             String::new()
@@ -169,17 +169,19 @@ fn render_repeat_items(
 ) -> Result<String, RenderError> {
     match hydration {
         Some(hy) => {
-            hy.next_binding();
-            let outer_start = hy.content_start_marker();
-            let outer_end = hy.content_end_marker();
+            let binding_index = hy.next_binding();
+            let outer_start = hy.content_start_marker(binding_index);
+            let outer_end = hy.content_end_marker(binding_index);
             let mut parts: Vec<String> = Vec::with_capacity(items.len());
             for (i, item) in items.iter().enumerate() {
                 let new_vars = build_loop_vars(loop_vars, var_name, item, i);
-                let mut item_scope = HydrationScope::new();
+                let mut item_scope = HydrationScope::new(config.markers_v2);
                 let rendered = render_node(inner, root, &new_vars, locator, Some(&mut item_scope), false, config)?;
                 parts.push(format!(
-                    "<!--fe:r-->{}<!--fe:/r-->",
-                    rendered
+                    "{}{}{}",
+                    hy.repeat_start_marker(i),
+                    rendered,
+                    hy.repeat_end_marker(i)
                 ));
             }
             Ok(format!("{}{}{}", outer_start, parts.concat(), outer_end))
@@ -269,7 +271,7 @@ pub fn render_custom_element(
     let child_root = child_root_owned.as_ref().unwrap_or(root);
 
     // Render the shadow DOM template with a fresh hydration scope.
-    let mut shadow_scope = HydrationScope::new();
+    let mut shadow_scope = HydrationScope::new(config.markers_v2);
     let element_template = locator.get_template(&tag_name).unwrap_or_default();
     let rendered = render_node(element_template, child_root, &[], Some(locator), Some(&mut shadow_scope), false, config)?;
     let shadowroot_attributes = build_shadowroot_template_attrs(locator.get_shadowroot_attributes(&tag_name));
@@ -686,8 +688,8 @@ pub(crate) fn build_element_open_tag(
     let stripped = strip_client_only_attrs(&resolved);
     match parent_hydration {
         Some(hy) => {
-            hy.binding_idx += total_attr;
-            format!("{} data-fe=\"{}\">", stripped, total_attr)
+            let marker = hy.attribute_marker(total_attr);
+            format!("{} {}>", stripped, marker)
         }
         None => format!("{}>", stripped),
     }
diff --git a/crates/microsoft-fast-build/src/hydration.rs b/crates/microsoft-fast-build/src/hydration.rs
index 13f35be7f13..19c4c5343f4 100644
--- a/crates/microsoft-fast-build/src/hydration.rs
+++ b/crates/microsoft-fast-build/src/hydration.rs
@@ -1,17 +1,16 @@
 /// Hydration state for one template scope.
 /// Each custom-element shadow, f-when body, and f-repeat item template gets its own scope.
 ///
-/// Markers are data-free — they carry only a type indicator and start/end flag.
-/// The sequential factory pointer on the client derives all factory-to-node mappings
-/// from DFS traversal order. The `binding_idx` counter is used only to track how many
-/// attribute bindings have been allocated for `data-fe="N"` markers.
+/// FAST Element 3.x markers are data-free. FAST Element 2.x markers include
+/// binding and repeat indices so older server output can be reproduced when requested.
 pub struct HydrationScope {
     pub binding_idx: usize,
+    markers_v2: bool,
 }
 
 impl HydrationScope {
-    pub fn new() -> Self {
-        Self { binding_idx: 0 }
+    pub fn new(markers_v2: bool) -> Self {
+        Self { binding_idx: 0, markers_v2 }
     }
 
     pub fn next_binding(&mut self) -> usize {
@@ -20,23 +19,51 @@ impl HydrationScope {
         idx
     }
 
-    /// Content binding start marker: `<!--fe:b-->`
-    pub fn content_start_marker(&self) -> &'static str {
-        "<!--fe:b-->"
+    pub fn attribute_marker(&mut self, count: usize) -> String {
+        debug_assert!(count > 0);
+        let start = self.binding_idx;
+        self.binding_idx += count;
+
+        if !self.markers_v2 {
+            return format!("data-fe=\"{}\"", count);
+        }
+
+        if count == 1 {
+            format!("data-fe-b-{}", start)
+        } else {
+            format!("data-fe-c-{}-{}", start, count)
+        }
+    }
+
+    pub fn content_start_marker(&self, index: usize) -> String {
+        if self.markers_v2 {
+            format!("<!--fe-b$$start$${}$$fast-build$$fe-b-->", index)
+        } else {
+            "<!--fe:b-->".to_string()
+        }
     }
 
-    /// Content binding end marker: `<!--fe:/b-->`
-    pub fn content_end_marker(&self) -> &'static str {
-        "<!--fe:/b-->"
+    pub fn content_end_marker(&self, index: usize) -> String {
+        if self.markers_v2 {
+            format!("<!--fe-b$$end$${}$$fast-build$$fe-b-->", index)
+        } else {
+            "<!--fe:/b-->".to_string()
+        }
     }
 
-    /// Repeat item start marker: `<!--fe:r-->`
-    pub fn repeat_start_marker(&self) -> &'static str {
-        "<!--fe:r-->"
+    pub fn repeat_start_marker(&self, index: usize) -> String {
+        if self.markers_v2 {
+            format!("<!--fe-repeat$$start$${}$$fe-repeat-->", index)
+        } else {
+            "<!--fe:r-->".to_string()
+        }
     }
 
-    /// Repeat item end marker: `<!--fe:/r-->`
-    pub fn repeat_end_marker(&self) -> &'static str {
-        "<!--fe:/r-->"
+    pub fn repeat_end_marker(&self, index: usize) -> String {
+        if self.markers_v2 {
+            format!("<!--fe-repeat$$end$${}$$fe-repeat-->", index)
+        } else {
+            "<!--fe:/r-->".to_string()
+        }
     }
 }
diff --git a/crates/microsoft-fast-build/src/node.rs b/crates/microsoft-fast-build/src/node.rs
index c97d8647913..34ce0329b3a 100644
--- a/crates/microsoft-fast-build/src/node.rs
+++ b/crates/microsoft-fast-build/src/node.rs
@@ -7,7 +7,7 @@ use crate::locator::Locator;
 use crate::hydration::HydrationScope;
 use crate::attribute::{
     find_next_plain_html_tag, count_tag_attribute_bindings,
-    resolve_attribute_bindings_in_tag, strip_client_only_attrs, inject_count_marker, find_tag_end,
+    resolve_attribute_bindings_in_tag, strip_client_only_attrs, inject_hydration_marker, find_tag_end,
 };
 
 /// Recursively render a template fragment against root state and loop variables.
@@ -100,10 +100,10 @@ fn process_plain_html_tags(
                     // Allocate binding indices for this tag's bindings, resolve {{expr}}
                     // attribute values, strip client-only attrs, then inject the
                     // hydration marker `data-fe="N"`.
-                    hy.binding_idx += total;
                     let resolved = resolve_attribute_bindings_in_tag(tag_str, root, loop_vars);
                     let stripped = strip_client_only_attrs(&resolved);
-                    result.push_str(&inject_count_marker(&stripped, total));
+                    let marker = hy.attribute_marker(total);
+                    result.push_str(&inject_hydration_marker(&stripped, &marker));
                 } else {
                     // No bindings — still strip client-only attrs but no marker needed.
                     result.push_str(&strip_client_only_attrs(tag_str));
@@ -162,12 +162,12 @@ fn wrap_content_binding(
     match hydration {
         None => out,
         Some(hy) => {
-            hy.next_binding();
+            let index = hy.next_binding();
             format!(
                 "{}{}{}",
-                hy.content_start_marker(),
+                hy.content_start_marker(index),
                 out,
-                hy.content_end_marker()
+                hy.content_end_marker(index)
             )
         }
     }
diff --git a/crates/microsoft-fast-build/src/streaming.rs b/crates/microsoft-fast-build/src/streaming.rs
index 396ca9708a0..08d5615d7d6 100644
--- a/crates/microsoft-fast-build/src/streaming.rs
+++ b/crates/microsoft-fast-build/src/streaming.rs
@@ -1,6 +1,6 @@
 use crate::attribute::{
     count_tag_attribute_bindings, extract_directive_content, extract_directive_expr,
-    find_next_plain_html_tag, find_tag_end, inject_count_marker, parse_element_attributes,
+    find_next_plain_html_tag, find_tag_end, inject_hydration_marker, parse_element_attributes,
     read_tag_name, resolve_attribute_bindings_in_tag, strip_client_only_attrs,
 };
 use crate::config::RenderConfig;
@@ -106,10 +106,10 @@ fn process_plain_html_tags(
         match hydration.as_mut() {
             Some(hy) => {
                 if total > 0 {
-                    hy.binding_idx += total;
                     let resolved = resolve_attribute_bindings_in_tag(tag_str, root, loop_vars);
                     let stripped = strip_client_only_attrs(&resolved);
-                    result.push_str(&inject_count_marker(&stripped, total));
+                    let marker = hy.attribute_marker(total);
+                    result.push_str(&inject_hydration_marker(&stripped, &marker));
                 } else {
                     result.push_str(&strip_client_only_attrs(tag_str));
                 }
@@ -187,9 +187,9 @@ fn stream_when(
         })?;
 
     let chunks = if let Some(hy) = hydration {
-        hy.next_binding();
+        let index = hy.next_binding();
         let inner_chunks = if evaluate(&expr, root, loop_vars) {
-            let mut child_scope = HydrationScope::new();
+            let mut child_scope = HydrationScope::new(config.markers_v2);
             stream_node(
                 &inner,
                 root,
@@ -204,8 +204,8 @@ fn stream_when(
         };
         wrap_chunks_with_markers(
             inner_chunks,
-            hy.content_start_marker(),
-            hy.content_end_marker(),
+            &hy.content_start_marker(index),
+            &hy.content_end_marker(index),
         )
     } else if evaluate(&expr, root, loop_vars) {
         stream_node(&inner, root, loop_vars, locator, None, false, config)?
@@ -279,14 +279,12 @@ fn stream_repeat_items(
 ) -> Result<Vec<String>, RenderError> {
     match hydration {
         Some(hy) => {
-            hy.next_binding();
+            let binding_index = hy.next_binding();
             let mut chunks = Vec::new();
-            let repeat_start = hy.repeat_start_marker();
-            let repeat_end = hy.repeat_end_marker();
 
             for (i, item) in items.iter().enumerate() {
                 let new_vars = build_loop_vars(loop_vars, var_name, item, i);
-                let mut item_scope = HydrationScope::new();
+                let mut item_scope = HydrationScope::new(config.markers_v2);
                 let item_chunks = stream_node(
                     inner,
                     root,
@@ -298,14 +296,18 @@ fn stream_repeat_items(
                 )?;
                 extend_non_empty(
                     &mut chunks,
-                    wrap_chunks_with_markers(item_chunks, repeat_start, repeat_end),
+                    wrap_chunks_with_markers(
+                        item_chunks,
+                        &hy.repeat_start_marker(i),
+                        &hy.repeat_end_marker(i),
+                    ),
                 );
             }
 
             Ok(wrap_chunks_with_markers(
                 chunks,
-                hy.content_start_marker(),
-                hy.content_end_marker(),
+                &hy.content_start_marker(binding_index),
+                &hy.content_end_marker(binding_index),
             ))
         }
         None => {
@@ -352,7 +354,7 @@ fn stream_custom_element(
         build_custom_element_child_root(&attrs, root, loop_vars, config.attribute_name_strategy);
     let child_root = child_root_owned.as_ref().unwrap_or(root);
 
-    let mut shadow_scope = HydrationScope::new();
+    let mut shadow_scope = HydrationScope::new(config.markers_v2);
     let element_template = locator.get_template(&tag_name).unwrap_or_default();
     let rendered_shadow = render_node(
         element_template,
@@ -429,12 +431,12 @@ fn wrap_content_binding(out: String, hydration: Option<&mut HydrationScope>) ->
     match hydration {
         None => out,
         Some(hy) => {
-            hy.next_binding();
+            let index = hy.next_binding();
             format!(
                 "{}{}{}",
-                hy.content_start_marker(),
+                hy.content_start_marker(index),
                 out,
-                hy.content_end_marker()
+                hy.content_end_marker(index)
             )
         }
     }
diff --git a/crates/microsoft-fast-build/src/wasm.rs b/crates/microsoft-fast-build/src/wasm.rs
index d5e9909fe20..f62e61d94d4 100644
--- a/crates/microsoft-fast-build/src/wasm.rs
+++ b/crates/microsoft-fast-build/src/wasm.rs
@@ -32,6 +32,7 @@ pub fn render(entry: &str, state: Option<String>) -> Result<String, JsValue> {
 /// e.g. `{"my-button": "<template>...</template>"}`, or template metadata objects.
 /// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
 /// or `"none"`. Pass an empty string for the default.
+/// Set `markers_v2` to emit FAST Element 2.x indexed hydration markers.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
 pub fn render_with_templates(
@@ -39,10 +40,11 @@ pub fn render_with_templates(
     templates_json: &str,
     state: Option<String>,
     attribute_name_strategy: Option<String>,
+    markers_v2: Option<bool>,
 ) -> Result<String, JsValue> {
     let templates = parse_templates_map(templates_json)?;
     let locator = Locator::from_template_definitions(templates);
-    let config = build_config(attribute_name_strategy.as_deref())?;
+    let config = build_config(attribute_name_strategy.as_deref(), markers_v2.unwrap_or(false))?;
     match state {
         Some(state) => render_template_with_locator(entry, &state, &locator, config.as_ref()),
         None => render_template_with_locator_without_state(entry, &locator, config.as_ref()),
@@ -64,6 +66,7 @@ pub fn render_with_templates(
 /// Pass `stream: true` to return a JSON array string of stream chunks; in
 /// stream mode, `templates_json` may be `{}`. Omitted or `false` stream
 /// preserves the rendered HTML behavior.
+/// Set `markers_v2` to emit FAST Element 2.x indexed hydration markers.
 #[wasm_bindgen]
 pub fn render_entry_with_templates(
     entry: &str,
@@ -71,10 +74,11 @@ pub fn render_entry_with_templates(
     state: Option<String>,
     attribute_name_strategy: Option<String>,
     stream: Option<bool>,
+    markers_v2: Option<bool>,
 ) -> Result<String, JsValue> {
     let templates = parse_templates_map(templates_json)?;
     let locator = Locator::from_template_definitions(templates);
-    let config = build_config(attribute_name_strategy.as_deref())?;
+    let config = build_config(attribute_name_strategy.as_deref(), markers_v2.unwrap_or(false))?;
 
     if stream.unwrap_or(false) {
         let chunks = match state {
@@ -357,18 +361,26 @@ mod tests {
     }
 }
 
-/// Build an `Option<RenderConfig>` from the optional strategy string.
-/// Returns `None` for omitted, `""`, or `"camelCase"`; `Some(config)` for `"none"`.
-fn build_config(strategy: Option<&str>) -> Result<Option<RenderConfig>, JsValue> {
+/// Build an `Option<RenderConfig>` from the optional renderer settings.
+/// Returns `None` when both settings use their defaults.
+fn build_config(strategy: Option<&str>, markers_v2: bool) -> Result<Option<RenderConfig>, JsValue> {
     let strategy = strategy.unwrap_or("");
-    match strategy {
-        "" | "camelCase" => Ok(None),
-        "none" => Ok(Some(
-            RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None),
-        )),
-        _ => Err(JsValue::from_str(&format!(
+    let attribute_name_strategy = match strategy {
+        "" | "camelCase" => AttributeNameStrategy::CamelCase,
+        "none" => AttributeNameStrategy::None,
+        _ => return Err(JsValue::from_str(&format!(
             "Invalid attribute-name-strategy '{}': expected 'none' or 'camelCase'",
             strategy
         ))),
+    };
+
+    if attribute_name_strategy == AttributeNameStrategy::CamelCase && !markers_v2 {
+        return Ok(None);
     }
+
+    Ok(Some(
+        RenderConfig::new()
+            .with_attribute_name_strategy(attribute_name_strategy)
+            .with_markers_v2(markers_v2),
+    ))
 }
diff --git a/crates/microsoft-fast-build/tests/hydration.rs b/crates/microsoft-fast-build/tests/hydration.rs
index f617405ae79..68fda8d5abe 100644
--- a/crates/microsoft-fast-build/tests/hydration.rs
+++ b/crates/microsoft-fast-build/tests/hydration.rs
@@ -1,6 +1,8 @@
 mod common;
 use common::make_locator;
-use microsoft_fast_build::{render_with_locator, JsonValue};
+use microsoft_fast_build::{
+    render_stream_with_locator, render_with_locator, JsonValue, RenderConfig,
+};
 use std::collections::HashMap;
 
 fn hand_root(entries: Vec<(&str, JsonValue)>) -> JsonValue {
@@ -16,6 +18,51 @@ fn bool_val(b: bool) -> JsonValue { JsonValue::Bool(b) }
 fn arr_val(items: Vec<JsonValue>) -> JsonValue { JsonValue::Array(items) }
 fn empty() -> JsonValue { hand_root(vec![]) }
 
+#[test]
+fn test_hydration_markers_v2() {
+    let locator = make_locator(&[(
+        "test-element",
+        r#"
+            <input f-ref="{input}">
+            <button ?disabled="{{disabled}}" @click="{increment()}">Increment</button>
+            <f-repeat value="{{item in items}}"><span>{{item}}</span></f-repeat>
+        "#,
+    )]);
+    let root = hand_root(vec![
+        ("disabled", bool_val(false)),
+        ("items", arr_val(vec![str_val("one"), str_val("two")])),
+    ]);
+    let config = RenderConfig::new().with_markers_v2(true);
+    let result = render_with_locator(
+        "<test-element></test-element>",
+        &root,
+        &locator,
+        Some(&config),
+    ).unwrap();
+    let streamed = render_stream_with_locator(
+        "<test-element></test-element>",
+        &root,
+        &locator,
+        Some(&config),
+    ).unwrap().concat();
+
+    assert_eq!(streamed, result);
+    assert!(result.contains("data-fe-b-0"), "single attribute marker: {result}");
+    assert!(result.contains("data-fe-c-1-2"), "compact attribute marker: {result}");
+    assert!(
+        result.contains("<!--fe-b$$start$$3$$fast-build$$fe-b-->"),
+        "repeat content marker: {result}"
+    );
+    assert!(
+        result.contains("<!--fe-repeat$$start$$0$$fe-repeat-->"),
+        "repeat item marker: {result}"
+    );
+    assert!(
+        result.contains("<!--fe-b$$start$$0$$fast-build$$fe-b-->one"),
+        "repeat item content marker: {result}"
+    );
+}
+
 // ── Content bindings ──────────────────────────────────────────────────────────
 
 /// Simple `{{text}}` content binding inside a custom element shadow.
diff --git a/packages/fast-build/DESIGN.md b/packages/fast-build/DESIGN.md
index 2e4b9eef350..f182d7389d7 100644
--- a/packages/fast-build/DESIGN.md
+++ b/packages/fast-build/DESIGN.md
@@ -20,7 +20,7 @@ This document describes the internal architecture of the `@microsoft/fast-build`
 fast build [options]
         │
         ▼
-  parseArgs(argv)        ← --entry, --state, --output, --templates, --attribute-name-strategy, --config, --stream
+  parseArgs(argv)        ← --entry, --state, --output, --templates, --attribute-name-strategy, --markers_v2, --config, --stream
         │
         ├─ loadConfig(configPath)             ← load fast-build.config.json
         │       │
@@ -48,11 +48,11 @@ fast build [options]
         ▼
   stream?
      ├─ false
-     │    ├─ templates loaded → wasm.render_entry_with_templates(entry, JSON.stringify(templatesMap), state?, strategy)
+     │    ├─ templates loaded → wasm.render_entry_with_templates(entry, JSON.stringify(templatesMap), state?, strategy, false, markers_v2)
      │    └─ no templates     → wasm.render(entry, state?)
      │              ▼
      │        fs.writeFileSync(output, rendered)
-     └─ true  → wasm.render_entry_with_templates(entry, JSON.stringify(templatesMap), state?, strategy, true)
+     └─ true  → wasm.render_entry_with_templates(entry, JSON.stringify(templatesMap), state?, strategy, true, markers_v2)
                     ▼
               JSON.parse(chunksJson) → process.stdout.write(chunk)
 ```
@@ -113,7 +113,7 @@ CLI-provided paths are resolved relative to the current working directory (the d
 
 ### Validation
 
-The config file must be a JSON object. Build config keys must be one of `entry`, `state`, `output`, `templates`, `attribute-name-strategy`, or `stream`; `stream` must be a JSON boolean and other values must be strings. Convert config keys must be one of `syntax`, `template`, `output`, or `overwrite`; `overwrite` must be a JSON boolean and other values must be strings. Unknown keys and invalid value types produce an error referencing the config file path.
+The config file must be a JSON object. Build config keys must be one of `entry`, `state`, `output`, `templates`, `attribute-name-strategy`, `markers_v2`, or `stream`; `markers_v2` and `stream` must be JSON booleans and other values must be strings. Convert config keys must be one of `syntax`, `template`, `output`, or `overwrite`; `overwrite` must be a JSON boolean and other values must be strings. Unknown keys and invalid value types produce an error referencing the config file path.
 
 ### Helpers
 
@@ -232,8 +232,8 @@ The build WASM module exposes four functions; the CLI uses the entry renderer wh
 | Function | Used when |
 |----------|-----------|
 | `wasm.render(entry, state?)` | No custom element templates. Omitted state renders as `{}`. |
-| `wasm.render_with_templates(entry, templatesJson, state?, strategy)` | JS consumers that need non-entry template rendering with custom elements. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. |
-| `wasm.render_entry_with_templates(entry, templatesJson, state?, strategy, stream?)` | CLI entry HTML rendering when at least one template was loaded, and CLI `--stream` rendering when `stream` is `true`. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. With `stream: true`, returns a JSON array string of raw HTML chunks. |
+| `wasm.render_with_templates(entry, templatesJson, state?, strategy, markers_v2?)` | JS consumers that need non-entry template rendering with custom elements. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. `markers_v2` emits FAST Element 2.x indexed hydration markers. |
+| `wasm.render_entry_with_templates(entry, templatesJson, state?, strategy, stream?, markers_v2?)` | CLI entry HTML rendering when at least one template was loaded, and CLI `--stream` rendering when `stream` is `true`. Omitted state renders as `{}`. `strategy` is `"camelCase"` or `"none"`. With `stream: true`, returns a JSON array string of raw HTML chunks. `markers_v2` emits FAST Element 2.x indexed hydration markers. |
 | `wasm.parse_f_templates(html)` | Parsing `<f-template>` elements from each matched HTML file |
 
 `templatesJson` is a JSON-stringified object mapping element names to template metadata objects. Each object contains the raw inner template string extracted from `<template>` inside `<f-template>`, any forwarded `shadowrootAttributes`, and a `hostAttributes` array carrying the attributes declared on the inner `<template>` element. The WASM renderer uses this map to resolve custom element tags and inject Declarative Shadow DOM, copying `shadowroot*` attributes to the emitted `<template>` and merging `hostAttributes` onto the rendered host element opening tag (author host attributes win on conflicts; client-only attrs and `{{expr}}` / `?name="{{expr}}"` bindings are handled by the WASM renderer — see the [`microsoft-fast-build` DESIGN.md](../../crates/microsoft-fast-build/DESIGN.md) for details). It normalizes `shadowrootmode` and legacy `shadowroot` for compatibility: when neither has a non-empty value, it emits `shadowrootmode="open" shadowroot="open"`; when exactly one has a non-empty value, that value is mirrored to the other; when both have explicit non-empty values, both are preserved as authored, even if they conflict.
diff --git a/packages/fast-build/README.md b/packages/fast-build/README.md
index 1426b7ec79f..f47bb32a21d 100644
--- a/packages/fast-build/README.md
+++ b/packages/fast-build/README.md
@@ -41,6 +41,7 @@ fast convert [options]
 | `--output="<path>"` | `output.html` | Where to write the rendered HTML |
 | `--templates="<glob>"` | _(none)_ | Glob pattern(s) for custom element template HTML files. Separate multiple patterns with commas. A warning is printed if not provided in non-streaming mode or if no files match a pattern. |
 | `--attribute-name-strategy="<strategy>"` | `camelCase` | Strategy for mapping HTML attribute names to state property names on custom elements. `"camelCase"` converts dashes to camelCase (e.g. `foo-bar` → `fooBar`). `"none"` preserves dashes (e.g. `foo-bar` → `foo-bar`). See [Attribute name strategy](#attribute-name-strategy). |
+| `--markers_v2[=true/false]` | `false` | Emit FAST Element 2.x indexed hydration markers instead of the default FAST Element 3.x data-free markers. |
 | `--config="<path>"` | `fast-build.config.json` | Path to a JSON configuration file. If omitted, `fast-build.config.json` in the current directory is used when present. CLI arguments take precedence over config values. See [Configuration file](#configuration-file). |
 | `--stream[=true/false]` | `false` | Write rendered HTML chunks directly to stdout instead of writing `--output`. Valueless `--stream` is treated as `true`. |
 
@@ -181,7 +182,8 @@ Instead of passing every option on the command line, you can place a `fast-build
     "entry": "index.html",
     "state": "state.json",
     "output": "output.html",
-    "templates": "./components/**/*.html"
+    "templates": "./components/**/*.html",
+    "markers_v2": true
 }
 ```
 
@@ -195,7 +197,7 @@ fast build --config=configs/my-build.json
 
 **Path resolution:** File paths in the config file (`entry`, `state`, `output`, `templates`) are resolved relative to the config file's directory, not the current working directory. This ensures the config works correctly regardless of where the CLI is invoked.
 
-All keys are optional. Only the following keys are allowed: `entry`, `state`, `output`, `templates`, `attribute-name-strategy`, and `stream`. Unknown keys produce an error. Values must be strings except `stream`, which must be a JSON boolean (`true` or `false`). If `state` is omitted, rendering uses `{}`; if `state` is present, the referenced file must exist. CLI arguments always override config values, including `--stream=false` overriding `"stream": true`.
+All keys are optional. Only the following keys are allowed: `entry`, `state`, `output`, `templates`, `attribute-name-strategy`, `markers_v2`, and `stream`. Unknown keys produce an error. Values must be strings except `markers_v2` and `stream`, which must be JSON booleans (`true` or `false`). If `state` is omitted, rendering uses `{}`; if `state` is present, the referenced file must exist. CLI arguments always override config values, including `--stream=false` overriding `"stream": true`.
 
 ## Convert
 
diff --git a/packages/fast-build/bin/fast.js b/packages/fast-build/bin/fast.js
index 4499b04c875..ba1ae147d5c 100755
--- a/packages/fast-build/bin/fast.js
+++ b/packages/fast-build/bin/fast.js
@@ -12,16 +12,17 @@ const CONVERT_WASM_MODULE = path.join(
 );
 const BUILD_DEFAULT_CONFIG_FILENAME = "fast-build.config.json";
 const CONVERT_DEFAULT_CONFIG_FILENAME = "fast-convert.config.json";
-const VALUELESS_CLI_FLAGS = new Set(["stream", "overwrite"]);
+const VALUELESS_CLI_FLAGS = new Set(["markers_v2", "stream", "overwrite"]);
 const BUILD_ALLOWED_CONFIG_KEYS = new Set([
     "entry",
     "state",
     "output",
     "templates",
     "attribute-name-strategy",
+    "markers_v2",
     "stream",
 ]);
-const BUILD_BOOLEAN_CONFIG_KEYS = new Set(["stream"]);
+const BUILD_BOOLEAN_CONFIG_KEYS = new Set(["markers_v2", "stream"]);
 const CONVERT_ALLOWED_CONFIG_KEYS = new Set([
     "syntax",
     "template",
@@ -589,6 +590,7 @@ async function runBuild(args) {
         Object.prototype.hasOwnProperty.call(args, "state") ||
         Object.prototype.hasOwnProperty.call(config, "state");
     const attributeNameStrategy = resolveOption(args, config, configDir, "attribute-name-strategy");
+    const markersV2 = resolveBooleanOption(args, config, "markers_v2");
     const stream = resolveBooleanOption(args, config, "stream");
 
     if (attributeNameStrategy && attributeNameStrategy !== "none" && attributeNameStrategy !== "camelCase") {
@@ -665,6 +667,7 @@ async function runBuild(args) {
             stateContent,
             attributeNameStrategy || "",
             true,
+            markersV2,
         );
 
         /** @type {unknown} */
@@ -701,6 +704,8 @@ async function runBuild(args) {
             JSON.stringify(templatesMap),
             stateContent,
             attributeNameStrategy || "",
+            false,
+            markersV2,
         );
     } else {
         rendered = wasm.render(entryContent, stateContent);
@@ -736,6 +741,8 @@ function writeBuildUsage() {
         '  --attribute-name-strategy="camelCase"\n' +
         "                         Strategy for mapping attribute names to property names.\n" +
         '                         "camelCase" (default) or "none".\n' +
+        "  --markers_v2[=true|false]\n" +
+        "                         Emit FAST Element 2.x indexed hydration markers.\n" +
         '  --config="<path>"      Path to a fast-build config JSON file.\n' +
         '                         Defaults to "fast-build.config.json" in the\n' +
         "                         current directory if it exists. File paths in\n" +
diff --git a/packages/fast-build/test/config.test.js b/packages/fast-build/test/config.test.js
index f613b2fbd6a..777e8a94f4e 100644
--- a/packages/fast-build/test/config.test.js
+++ b/packages/fast-build/test/config.test.js
@@ -538,6 +538,54 @@ describe("config file loading", () => {
         run(["--config=sub/fast-build.config.json"], dir);
         assert.ok(fs.existsSync(path.join(subDir, "out.html")));
     });
+
+    it("forwards markers_v2 from config to the renderer", () => {
+        writeFixture(dir, {
+            config: {
+                entry: "entry.html",
+                state: "state.json",
+                output: "out.html",
+                templates: "templates.html",
+                markers_v2: true,
+            },
+        });
+        fs.writeFileSync(
+            path.join(dir, "templates.html"),
+            '<f-template name="my-el"><template>{{text}}</template></f-template>',
+        );
+
+        const { calls } = runWithStubbedWasm([], dir);
+        const renderCall = calls.find(
+            call => call.name === "render_entry_with_templates",
+        );
+
+        assert.ok(renderCall);
+        assert.equal(renderCall.markersV2, true);
+    });
+
+    it("lets the valueless --markers_v2 option override config", () => {
+        writeFixture(dir, {
+            config: {
+                entry: "entry.html",
+                state: "state.json",
+                output: "out.html",
+                templates: "templates.html",
+                markers_v2: false,
+            },
+        });
+        fs.writeFileSync(
+            path.join(dir, "templates.html"),
+            '<f-template name="my-el"><template>{{text}}</template></f-template>',
+        );
+
+        const { calls } = runWithStubbedWasm(["--markers_v2"], dir);
+        const renderCall = calls.find(
+            call => call.name === "render_entry_with_templates",
+        );
+
+        assert.ok(renderCall);
+        assert.equal(renderCall.markersV2, true);
+    });
 });
 
 describe("config validation", () => {
@@ -598,6 +646,21 @@ describe("config validation", () => {
         assert.ok(result.stderr.includes('Value for "stream"'));
         assert.ok(result.stderr.includes("must be a boolean"));
     });
+
+    it("rejects non-boolean markers_v2 config values", () => {
+        writeFixture(dir, {
+            config: {
+                entry: "entry.html",
+                state: "state.json",
+                output: "out.html",
+                markers_v2: "true",
+            },
+        });
+        const result = runWithStderr([], dir);
+        assert.equal(result.exitCode, 1);
+        assert.ok(result.stderr.includes('Value for "markers_v2"'));
+        assert.ok(result.stderr.includes("must be a boolean"));
+    });
 });
 
 describe("backward compatibility", () => {
diff --git a/packages/fast-build/test/wasm-stub.cjs b/packages/fast-build/test/wasm-stub.cjs
index 62d5cb7262f..1269dab61f5 100644
--- a/packages/fast-build/test/wasm-stub.cjs
+++ b/packages/fast-build/test/wasm-stub.cjs
@@ -36,6 +36,7 @@ const stub = {
         state,
         attributeNameStrategy,
         stream,
+        markersV2,
     ) {
         calls.push({
             name: "render_entry_with_templates",
@@ -44,6 +45,7 @@ const stub = {
             state,
             attributeNameStrategy,
             stream,
+            markersV2,
         });
         if (!stream) {
             return "<my-el>Non-stream</my-el>";
diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md
index 92776e2939b..7e203420108 100644
--- a/packages/fast-element/DESIGN.md
+++ b/packages/fast-element/DESIGN.md
@@ -174,7 +174,7 @@ formatter in a custom `HydrationDebugger` and pass it through
 `enableHydration({ debugger })`) if you want to route diagnostics into
 logging, telemetry, or a devtools panel.
 
-- **Hydration tracking**: Hydration is opt-in via `enableHydration()` from `@microsoft/fast-element/hydration.js`, which creates a `HydrationTracker` and installs a pluggable hydration hook on `ElementController` via `ElementController.installHydrationHook()`. Until this is called, `renderTemplate()` always uses the client-side path — even if the element has a pre-existing shadow root. `HydrationTracker` manages a `Set<HTMLElement>` of pending elements and resolves the returned controller's `whenHydrated()` promise via a debounced `setTimeout(0)` after the last element finishes binding — ensuring all async template batches settle first. It also resolves tag-specific `whenHydrated(tagName)` promises when work for that FAST element tag completes. Hydration target discovery uses the 3.x data-free marker reader by default; `enableHydration({ markers: v2 })` installs the isolated 2.x indexed marker reader for staged SSR migrations. By default, the hook no-ops for later prerendered batches after hydration completes; `enableHydration({ stopHydration: StopHydration.never })` keeps the hook active for streamed Declarative Shadow DOM so new elements continue checking for an existing shadow root and hydrate instead of re-rendering it. In that mode, the global `whenHydrated()` promise intentionally remains pending.
+- **Hydration tracking**: Hydration is opt-in via `enableHydration()` from `@microsoft/fast-element/hydration.js`, which creates a `HydrationTracker` and installs a pluggable hydration hook on `ElementController` via `ElementController.installHydrationHook()`. Until this is called, `renderTemplate()` always uses the client-side path — even if the element has a pre-existing shadow root. `HydrationTracker` manages a `Set<HTMLElement>` of pending elements and resolves the returned controller's `whenHydrated()` promise via a debounced `setTimeout(0)` after the last element finishes binding — ensuring all async template batches settle first. It also resolves tag-specific `whenHydrated(tagName)` promises when work for that FAST element tag completes. Hydration target discovery uses the 3.x data-free marker reader by default; `enableHydration({ markers: markers_v2 })` installs the isolated 2.x indexed marker reader for staged SSR migrations. By default, the hook no-ops for later prerendered batches after hydration completes; `enableHydration({ stopHydration: StopHydration.never })` keeps the hook active for streamed Declarative Shadow DOM so new elements continue checking for an existing shadow root and hydrate instead of re-rendering it. In that mode, the global `whenHydrated()` promise intentionally remains pending.
 - On `disconnect()`: calls `disconnectedCallback` on behaviors, unbinds the view.
 - `onAttributeChangedCallback()` is the standard handler that processes attribute changes. During the prerendered bind, it is temporarily swapped to a no-op (see above) to avoid redundant processing of server-rendered attribute values.
 - Exposes `addBehavior` / `removeBehavior` for dynamic `HostBehavior` management (used by `ElementStyles`).
diff --git a/packages/fast-element/README.md b/packages/fast-element/README.md
index 56659e5cf11..1db4f199744 100644
--- a/packages/fast-element/README.md
+++ b/packages/fast-element/README.md
@@ -217,11 +217,14 @@ server output that still contains FAST Element 2.x indexed markers, opt into the
 legacy marker reader:
 
 ```typescript
-import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+import { enableHydration, markers_v2 } from "@microsoft/fast-element/hydration.js";
 
-enableHydration({ markers: v2 });
+enableHydration({ markers: markers_v2 });
 ```
 
+When using `@microsoft/fast-build`, set `"markers_v2": true` in
+`fast-build.config.json` so the renderer and client use the same format.
+
 When hydration is enabled and a FAST element connects with an existing shadow root (from server-side rendering or declarative shadow DOM), `ElementController` detects this and hydrates instead of re-rendering. Two properties on the controller let you inspect the result:
 
 - **`isPrerendered: Promise<boolean>`** — resolves `true` when the element had a declarative shadow root (DSD) at connect time, regardless of whether hydration ran.
diff --git a/packages/fast-element/docs/declarative/design.md b/packages/fast-element/docs/declarative/design.md
index 97cb160822f..a4516f6a232 100644
--- a/packages/fast-element/docs/declarative/design.md
+++ b/packages/fast-element/docs/declarative/design.md
@@ -325,7 +325,7 @@ Primary declarative exports intended for application code:
 
 Hydration marker selection is available from
 `@microsoft/fast-element/hydration.js`. FAST Element 3.x data-free markers are
-the default; `enableHydration({ markers: v2 })` opts into the FAST Element 2.x
+the default; `enableHydration({ markers: markers_v2 })` opts into the FAST Element 2.x
 indexed marker reader for staged server/client migrations.
 
 Primary map extension exports:
@@ -712,8 +712,8 @@ With `declarativeTemplate()`, connection gating happens before platform registra
 `enableHydration()` uses the FAST Element 3.x data-free marker reader by
 default. The marker strategy is shared by target discovery and nested repeat
 hydration so a view uses one consistent format throughout its hydration walk.
-The optional `v2` strategy contains the legacy indexed-marker parsing logic and
-is selected with `enableHydration({ markers: v2 })`.
+The optional `markers_v2` strategy contains the legacy indexed-marker parsing logic and
+is selected with `enableHydration({ markers: markers_v2 })`.
 
 **Content bindings** use HTML comments (data-free, matched by string equality):
 
diff --git a/packages/fast-element/docs/declarative/syntax.md b/packages/fast-element/docs/declarative/syntax.md
index b23572e039c..a02d028fb1c 100644
--- a/packages/fast-element/docs/declarative/syntax.md
+++ b/packages/fast-element/docs/declarative/syntax.md
@@ -102,11 +102,14 @@ server output that uses FAST Element 2.x indexed markers can be hydrated by
 selecting the v2 marker reader:
 
 ```typescript
-import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+import { enableHydration, markers_v2 } from "@microsoft/fast-element/hydration.js";
 
-enableHydration({ markers: v2 });
+enableHydration({ markers: markers_v2 });
 ```
 
+Set `"markers_v2": true` in the matching `@microsoft/fast-build`
+configuration so the generated HTML uses the same marker format.
+
 ## `observerMap`
 
 When the `observerMap()` extension is applied to an element definition,
diff --git a/packages/fast-element/src/components/enable-hydration.ts b/packages/fast-element/src/components/enable-hydration.ts
index 3b67af7e85f..29c64b8786d 100644
--- a/packages/fast-element/src/components/enable-hydration.ts
+++ b/packages/fast-element/src/components/enable-hydration.ts
@@ -52,7 +52,7 @@ let hookInstalled = false;
  * `HydrationTargetElementError`. The debugger module is tree-shaken
  * out of production hydration bundles unless explicitly imported.
  *
- * Pass `markers: v2` when hydrating server output that still uses FAST
+ * Pass `markers: markers_v2` when hydrating server output that still uses FAST
  * Element 2.x indexed hydration markers. FAST Element 3.x data-free markers
  * remain the default.
  *
@@ -84,9 +84,9 @@ let hookInstalled = false;
  *
  * @example FAST Element 2.x hydration markers
  * ```ts
- * import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+ * import { enableHydration, markers_v2 } from "@microsoft/fast-element/hydration.js";
  *
- * enableHydration({ markers: v2 });
+ * enableHydration({ markers: markers_v2 });
  * ```
  *
  * @param options - Optional hydration behavior.
diff --git a/packages/fast-element/src/components/hydration.pw.spec.ts b/packages/fast-element/src/components/hydration.pw.spec.ts
index ed913ead0c0..0b817c101a7 100644
--- a/packages/fast-element/src/components/hydration.pw.spec.ts
+++ b/packages/fast-element/src/components/hydration.pw.spec.ts
@@ -451,215 +451,6 @@ test.describe("The prerendered content optimization", () => {
         expect(result.spanCount).toBe(3);
     });
 
-    test("uses v3 markers by default and recognizes v2 markers only through the v2 reader", async ({
-        page,
-    }) => {
-        await page.goto("/");
-
-        const result = await page.evaluate(async () => {
-            const {
-                HydrationMarkup,
-                v2,
-                // @ts-expect-error: Client module.
-            } = await import("/main.js");
-
-            const defaultElement = document.createElement("div");
-            defaultElement.setAttribute("data-fe-b", "0 1");
-            defaultElement.setAttribute("data-fe-b-2", "");
-            defaultElement.setAttribute("data-fe-c-3-2", "");
-
-            const v2Element = document.createElement("div");
-            v2Element.setAttribute("data-fe-b", "0 1");
-            const v2Attributes = v2.resolveAttributeBindings(v2Element, 2, 2);
-            v2Attributes?.cleanup?.();
-
-            return {
-                defaults: {
-                    attributeCount:
-                        HydrationMarkup.parseAttributeBindingCount(defaultElement),
-                    contentEnd: HydrationMarkup.isContentBindingEndMarker(
-                        "fe-b$$end$$0$$scope$$fe-b",
-                    ),
-                    contentStart: HydrationMarkup.isContentBindingStartMarker(
-                        "fe-b$$start$$0$$scope$$fe-b",
-                    ),
-                    elementEnd: HydrationMarkup.isElementBoundaryEndMarker(
-                        document.createComment("fe-eb$$end$$element$$fe-eb"),
-                    ),
-                    elementStart: HydrationMarkup.isElementBoundaryStartMarker(
-                        document.createComment("fe-eb$$start$$element$$fe-eb"),
-                    ),
-                    repeatEnd: HydrationMarkup.isRepeatViewEndMarker(
-                        "fe-repeat$$end$$0$$fe-repeat",
-                    ),
-                    repeatStart: HydrationMarkup.isRepeatViewStartMarker(
-                        "fe-repeat$$start$$0$$fe-repeat",
-                    ),
-                },
-                v2: {
-                    attributeIndices: v2Attributes?.factoryIndices,
-                    attributeMarkersRemoved: v2Element.getAttributeNames().length === 0,
-                    contentEnd: v2.isContentBindingEndMarker("fe-b$$end$$0$$scope$$fe-b"),
-                    contentStart: v2.isContentBindingStartMarker(
-                        "fe-b$$start$$0$$scope$$fe-b",
-                    ),
-                    elementEnd: v2.isElementBoundaryEndMarker(
-                        document.createComment("fe-eb$$end$$element$$fe-eb"),
-                    ),
-                    elementStart: v2.isElementBoundaryStartMarker(
-                        document.createComment("fe-eb$$start$$element$$fe-eb"),
-                    ),
-                    repeatEnd: v2.isRepeatViewEndMarker("fe-repeat$$end$$0$$fe-repeat"),
-                    repeatStart: v2.isRepeatViewStartMarker(
-                        "fe-repeat$$start$$0$$fe-repeat",
-                    ),
-                },
-            };
-        });
-
-        expect(result).toEqual({
-            defaults: {
-                attributeCount: null,
-                contentEnd: false,
-                contentStart: false,
-                elementEnd: false,
-                elementStart: false,
-                repeatEnd: false,
-                repeatStart: false,
-            },
-            v2: {
-                attributeIndices: [2, 3],
-                attributeMarkersRemoved: true,
-                contentEnd: true,
-                contentStart: true,
-                elementEnd: true,
-                elementStart: true,
-                repeatEnd: true,
-                repeatStart: true,
-            },
-        });
-    });
-
-    test("hydrates legacy indexed repeat markers when configured", async ({ page }) => {
-        await page.goto("/");
-
-        const element = await page.evaluateHandle(async () => {
-            const {
-                enableHydration,
-                FASTElement,
-                FASTElementDefinition,
-                html,
-                repeat,
-                uniqueElementName,
-                v2,
-                // @ts-expect-error: Client module.
-            } = await import("/main.js");
-
-            enableHydration({ markers: v2 });
-            const name = uniqueElementName();
-
-            class TestElement extends FASTElement {
-                items = ["one", "two"];
-
-                static definition = {
-                    name,
-                    template: html<TestElement>`
-                        ${repeat((x: { items: any }) => x.items, html<string>`<span>${(x: any) => x}</span>`)}
-                    `,
-                };
-            }
-
-            await (await FASTElementDefinition.compose(TestElement)).define();
-
-            const container = document.createElement("div");
-            document.body.appendChild(container);
-            (container as any).setHTMLUnsafe(
-                `<${name}><template shadowrootmode="open"><!--fe-b$$start$$0$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat--><span><!--fe-b$$start$$0$$item-1$$fe-b-->server-one<!--fe-b$$end$$0$$item-1$$fe-b--></span><!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$0$$repeat-1$$fe-b--></template></${name}>`,
-            );
-
-            return container.firstElementChild;
-        });
-
-        const result = await element.evaluate(async (element: any) => {
-            await element.$fastController.isHydrated;
-            await new Promise(resolve => requestAnimationFrame(resolve));
-
-            return {
-                text: element.shadowRoot?.textContent?.replace(/\s+/g, "") ?? "",
-                spanCount: element.shadowRoot?.querySelectorAll("span").length ?? 0,
-            };
-        });
-
-        expect(result.text).toBe("onetwo");
-        expect(result.spanCount).toBe(2);
-    });
-
-    test("hydrates legacy indexed attribute markers when configured", async ({
-        page,
-    }) => {
-        await page.goto("/");
-
-        const element = await page.evaluateHandle(async () => {
-            const {
-                enableHydration,
-                FASTElement,
-                FASTElementDefinition,
-                html,
-                ref,
-                uniqueElementName,
-                v2,
-                // @ts-expect-error: Client module.
-            } = await import("/main.js");
-
-            enableHydration({ markers: v2 });
-            const name = uniqueElementName();
-
-            class TestElement extends FASTElement {
-                count = 0;
-                disabled = false;
-                input!: HTMLInputElement;
-
-                static definition = {
-                    name,
-                    template: html<TestElement>`
-                        <input ${ref("input")}>
-                        <button
-                            ?disabled=${(x: TestElement) => x.disabled}
-                            @click=${(x: TestElement) => x.count++}
-                        >
-                            Increment
-                        </button>
-                    `,
-                };
-            }
-
-            await (await FASTElementDefinition.compose(TestElement)).define();
-
-            const container = document.createElement("div");
-            document.body.appendChild(container);
-            (container as any).setHTMLUnsafe(
-                `<${name}><template shadowrootmode="open"><input data-fe-b-0><button data-fe-c-1-2>Increment</button></template></${name}>`,
-            );
-
-            return container.firstElementChild;
-        });
-
-        const result = await element.evaluate(async (element: any) => {
-            await element.$fastController.isHydrated;
-            await new Promise(resolve => requestAnimationFrame(resolve));
-            element.shadowRoot!.querySelector("button")!.click();
-
-            return {
-                count: element.count,
-                inputResolved:
-                    element.input === element.shadowRoot!.querySelector("input"),
-            };
-        });
-
-        expect(result.count).toBe(1);
-        expect(result.inputResolved).toBe(true);
-    });
-
     test("should remove extra repeat ranges when SSR rendered more items", async ({
         page,
     }) => {
diff --git a/packages/fast-element/src/hydration/exports.ts b/packages/fast-element/src/hydration/exports.ts
index cf319b13a3b..0e97a8bb090 100644
--- a/packages/fast-element/src/hydration/exports.ts
+++ b/packages/fast-element/src/hydration/exports.ts
@@ -69,7 +69,7 @@ export type {
 export type { HydrationDebugger } from "./hydration-debugger.js";
 export { hydrationDebugger } from "./hydration-debugger.js";
 export type { HydrationMarkers } from "./markers.js";
-export { v2 } from "./markers-v2.js";
+export { markers_v2 } from "./markers-v2.js";
 export type {
     ViewBehaviorBoundaries,
     ViewBoundaries,
diff --git a/packages/fast-element/src/hydration/markers-v2.ts b/packages/fast-element/src/hydration/markers-v2.ts
index 7f48534319a..0aea504e911 100644
--- a/packages/fast-element/src/hydration/markers-v2.ts
+++ b/packages/fast-element/src/hydration/markers-v2.ts
@@ -104,13 +104,13 @@ function removeAttributeBindingMarkers(node: Element): void {
  *
  * @example
  * ```ts
- * import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+ * import { enableHydration, markers_v2 } from "@microsoft/fast-element/hydration.js";
  *
- * enableHydration({ markers: v2 });
+ * enableHydration({ markers: markers_v2 });
  * ```
  * @public
  */
-export const v2: HydrationMarkers = createHydrationMarkers({
+export const markers_v2: HydrationMarkers = createHydrationMarkers({
     expectedContentAfterStartMarker:
         "content following a `fe-b$$start$$...$$fe-b` content binding marker",
     expectedContentEndMarker:
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/README.md b/packages/fast-element/test/declarative/fixtures/ecosystem/README.md
index a3a0dc3574c..e95034554f9 100644
--- a/packages/fast-element/test/declarative/fixtures/ecosystem/README.md
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/README.md
@@ -8,5 +8,6 @@ performance monitoring.
 |---|---|
 | `errors` | Error handling and edge cases in template rendering. |
 | `hydration-config` | Hydration configuration for Declarative Shadow DOM appended after the initial hydration batch. |
+| `hydration-markers-v2` | Hydration using FAST Element 2.x indexed markers generated by `@microsoft/fast-build`. |
 | `lifecycle` | Promise readiness coverage for `whenHydrated`. |
 | `performance-metrics` | Performance monitoring and measurements using hydration readiness promises. |
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/entry.html b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/entry.html
new file mode 100644
index 00000000000..c7a2a3451fc
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/entry.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>FAST Element 2.x Hydration Markers</title>
+    </head>
+    <body>
+        <hydration-markers-v2-element
+            :items="{{items}}"
+            ?disabled="{{disabled}}"
+        ></hydration-markers-v2-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/fast-build.config.json b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/fast-build.config.json
new file mode 100644
index 00000000000..1b9b3efa517
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/fast-build.config.json
@@ -0,0 +1,7 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html",
+    "markers_v2": true
+}
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts
new file mode 100644
index 00000000000..ec355d9581d
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts
@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import type { HydrationMarkersV2Element } from "./main.js";
+
+test.describe("FAST Element 2.x hydration markers", () => {
+    test("hydrates output generated by fast-build with markers_v2", async ({ page }) => {
+        const hydrationCompleted = page.waitForFunction(
+            () => (window as any).hydrationCompleted === true,
+        );
+        await page.goto("/fixtures/ecosystem/hydration-markers-v2/");
+        await hydrationCompleted;
+
+        const rawFixtureHtml = await page.request
+            .get("/fixtures/ecosystem/hydration-markers-v2/")
+            .then(response => response.text());
+
+        expect(rawFixtureHtml).toContain("fe-b$$start$$3$$fast-build$$fe-b");
+        expect(rawFixtureHtml).toContain("fe-repeat$$start$$0$$fe-repeat");
+        expect(rawFixtureHtml).toContain("data-fe-b-0");
+        expect(rawFixtureHtml).toContain("data-fe-c-1-2");
+
+        const element = page.locator("hydration-markers-v2-element");
+        const input = element.locator("input");
+        const button = element.locator("button");
+        const items = element.locator("span");
+
+        await expect(input).toHaveAttribute("data-server-node", "input");
+        await expect(input).not.toHaveAttribute("data-fe-b-0", "");
+        await expect(button).not.toHaveAttribute("data-fe-c-1-2", "");
+        await expect(items).toHaveText(["one", "two"]);
+
+        await element.evaluate((node: HydrationMarkersV2Element) => {
+            node.disabled = true;
+        });
+        await expect(button).toBeDisabled();
+        await element.evaluate((node: HydrationMarkersV2Element) => {
+            node.disabled = false;
+        });
+        await expect(button).toBeEnabled();
+
+        await button.click();
+        expect(
+            await element.evaluate((node: HydrationMarkersV2Element) => node.count),
+        ).toBe(1);
+
+        await element.evaluate((node: HydrationMarkersV2Element) => {
+            node.items = ["three"];
+        });
+        await expect(items).toHaveText(["three"]);
+        expect(
+            await element.evaluate(
+                (node: HydrationMarkersV2Element) =>
+                    node.input === node.shadowRoot!.querySelector("input"),
+            ),
+        ).toBe(true);
+    });
+});
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/index.html b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/index.html
new file mode 100644
index 00000000000..29e214de212
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>FAST Element 2.x Hydration Markers</title>
+    </head>
+    <body>
+        <hydration-markers-v2-element><template shadowrootmode="open" shadowroot="open"><input data-server-node="input" data-fe-b-0>
+        <button data-fe-c-1-2>Increment</button>
+        <!--fe-b$$start$$3$$fast-build$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
+            <span><!--fe-b$$start$$0$$fast-build$$fe-b-->server-one<!--fe-b$$end$$0$$fast-build$$fe-b--></span>
+        <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$3$$fast-build$$fe-b--></template></hydration-markers-v2-element>
+<f-template name="hydration-markers-v2-element">
+    <template>
+        <input data-server-node="input" f-ref="{input}">
+        <button ?disabled="{{disabled}}" @click="{increment()}">Increment</button>
+        <f-repeat value="{{item in items}}">
+            <span>{{item}}</span>
+        </f-repeat>
+    </template>
+</f-template>
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/main.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/main.ts
new file mode 100644
index 00000000000..02bbeeaab33
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/main.ts
@@ -0,0 +1,31 @@
+import { attr } from "@microsoft/fast-element/attr.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+import { enableHydration, markers_v2 } from "@microsoft/fast-element/hydration.js";
+import { observable } from "@microsoft/fast-element/observable.js";
+
+const hydration = enableHydration({ markers: markers_v2 });
+
+export class HydrationMarkersV2Element extends FASTElement {
+    @observable
+    items: string[] = ["one", "two"];
+
+    @attr({ mode: "boolean" })
+    disabled: boolean = false;
+
+    input!: HTMLInputElement;
+    count: number = 0;
+
+    increment(): void {
+        this.count++;
+    }
+}
+
+HydrationMarkersV2Element.define({
+    name: "hydration-markers-v2-element",
+    template: declarativeTemplate(),
+});
+
+void hydration.whenHydrated().then(() => {
+    (window as any).hydrationCompleted = true;
+});
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/state.json b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/state.json
new file mode 100644
index 00000000000..e296912e339
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/state.json
@@ -0,0 +1,4 @@
+{
+    "items": ["server-one"],
+    "disabled": false
+}
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/templates.html b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/templates.html
new file mode 100644
index 00000000000..ee5081f1d1f
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/templates.html
@@ -0,0 +1,9 @@
+<f-template name="hydration-markers-v2-element">
+    <template>
+        <input data-server-node="input" f-ref="{input}">
+        <button ?disabled="{{disabled}}" @click="{increment()}">Increment</button>
+        <f-repeat value="{{item in items}}">
+            <span>{{item}}</span>
+        </f-repeat>
+    </template>
+</f-template>
diff --git a/packages/fast-element/test/main.ts b/packages/fast-element/test/main.ts
index 1df45ac0d3e..c8b53ef4086 100644
--- a/packages/fast-element/test/main.ts
+++ b/packages/fast-element/test/main.ts
@@ -46,7 +46,7 @@ export {
 export { DOM, DOMAspect } from "../src/dom.js";
 export { DOMPolicy } from "../src/dom-policy.js";
 export { hydrationDebugger } from "../src/hydration/hydration-debugger.js";
-export { v2 } from "../src/hydration/markers-v2.js";
+export { markers_v2 } from "../src/hydration/markers-v2.js";
 export { Observable, observable } from "../src/observation/observable.js";
 export { Updates } from "../src/observation/update-queue.js";
 export { volatile } from "../src/observation/volatile.js";
diff --git a/sites/website/src/docs/3.x/migration-guide/hydration.md b/sites/website/src/docs/3.x/migration-guide/hydration.md
index 1ca82ea378a..f6d8bfda351 100644
--- a/sites/website/src/docs/3.x/migration-guide/hydration.md
+++ b/sites/website/src/docs/3.x/migration-guide/hydration.md
@@ -205,9 +205,17 @@ For a staged migration where the server still emits FAST Element 2.x indexed
 markers, configure the v3 client explicitly:
 
 ```ts
-import { enableHydration, v2 } from "@microsoft/fast-element/hydration.js";
+import { enableHydration, markers_v2 } from "@microsoft/fast-element/hydration.js";
 
-enableHydration({ markers: v2 });
+enableHydration({ markers: markers_v2 });
+```
+
+Configure `@microsoft/fast-build` with the matching marker option:
+
+```json
+{
+    "markers_v2": true
+}
 ```
 
 The v2 reader accepts the old indexed comment and attribute marker formats. It
@@ -221,7 +229,7 @@ data that the client runtime sees during the element's first render. The
 renderer and client both rely on compatible binding order and marker syntax.
 Deploy server-rendered output and client bundles together. When a staged
 migration requires a v3 client to hydrate v2 marker output, select
-`enableHydration({ markers: v2 })`; the default reader expects v3 markers.
+`enableHydration({ markers: markers_v2 })`; the default reader expects v3 markers.
 
 Do not minify or sanitize away FAST comments or `data-fe` attributes before the
 client loads. A missing `fe:/b` marker, an invalid `data-fe` count, or a changed
@@ -266,7 +274,7 @@ Hydration mismatch in <my-element>.
 | `HydrationTracker` | `@microsoft/fast-element/hydration.js` | Standalone hydration lifecycle tracker class. |
 | `HydrationOptions` | `@microsoft/fast-element/hydration.js` | Type for hydration configuration options. |
 | `HydrationMarkers` | `@microsoft/fast-element/hydration.js` | Contract for selecting a hydration marker reader. |
-| `v2` | `@microsoft/fast-element/hydration.js` | Opt-in reader for FAST Element 2.x indexed hydration markers. |
+| `markers_v2` | `@microsoft/fast-element/hydration.js` | Opt-in reader for FAST Element 2.x indexed hydration markers. |
 
 ## Migration checklist
 

From 803fd43f19d8ad98e3710b5d419dcc682753f769 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:48:09 -0700
Subject: [PATCH 5/6] test: exercise hydration behavior with v2 markers

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: c66c1387-9a1b-4386-8d0f-a115ef5706db
---
 .../hydration-markers-v2.spec.ts              | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts
index ec355d9581d..1364807334d 100644
--- a/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/hydration-markers-v2/hydration-markers-v2.spec.ts
@@ -2,55 +2,66 @@ import { expect, test } from "@playwright/test";
 import type { HydrationMarkersV2Element } from "./main.js";
 
 test.describe("FAST Element 2.x hydration markers", () => {
-    test("hydrates output generated by fast-build with markers_v2", async ({ page }) => {
+    test("hydrates the server-rendered view", async ({ page }) => {
         const hydrationCompleted = page.waitForFunction(
             () => (window as any).hydrationCompleted === true,
         );
         await page.goto("/fixtures/ecosystem/hydration-markers-v2/");
         await hydrationCompleted;
 
-        const rawFixtureHtml = await page.request
-            .get("/fixtures/ecosystem/hydration-markers-v2/")
-            .then(response => response.text());
+        const element = page.locator("hydration-markers-v2-element");
+        const items = element.locator("span");
+
+        expect(
+            await element.evaluate(
+                (node: HydrationMarkersV2Element) => node.$fastController.isHydrated,
+            ),
+        ).toBe(true);
+        await expect(items).toHaveText(["one", "two"]);
+    });
 
-        expect(rawFixtureHtml).toContain("fe-b$$start$$3$$fast-build$$fe-b");
-        expect(rawFixtureHtml).toContain("fe-repeat$$start$$0$$fe-repeat");
-        expect(rawFixtureHtml).toContain("data-fe-b-0");
-        expect(rawFixtureHtml).toContain("data-fe-c-1-2");
+    test("updates repeat content after hydration", async ({ page }) => {
+        const hydrationCompleted = page.waitForFunction(
+            () => (window as any).hydrationCompleted === true,
+        );
+        await page.goto("/fixtures/ecosystem/hydration-markers-v2/");
+        await hydrationCompleted;
+
+        const element = page.locator("hydration-markers-v2-element");
+        await element.evaluate((node: HydrationMarkersV2Element) => {
+            node.items = ["three"];
+        });
+        await expect(element.locator("span")).toHaveText(["three"]);
+    });
+
+    test("connects attribute and event bindings", async ({ page }) => {
+        const hydrationCompleted = page.waitForFunction(
+            () => (window as any).hydrationCompleted === true,
+        );
+        await page.goto("/fixtures/ecosystem/hydration-markers-v2/");
+        await hydrationCompleted;
 
         const element = page.locator("hydration-markers-v2-element");
-        const input = element.locator("input");
         const button = element.locator("button");
-        const items = element.locator("span");
 
-        await expect(input).toHaveAttribute("data-server-node", "input");
-        await expect(input).not.toHaveAttribute("data-fe-b-0", "");
-        await expect(button).not.toHaveAttribute("data-fe-c-1-2", "");
-        await expect(items).toHaveText(["one", "two"]);
+        expect(
+            await element.evaluate(
+                (node: HydrationMarkersV2Element) =>
+                    node.input === node.shadowRoot!.querySelector("input"),
+            ),
+        ).toBe(true);
 
         await element.evaluate((node: HydrationMarkersV2Element) => {
             node.disabled = true;
         });
         await expect(button).toBeDisabled();
+
         await element.evaluate((node: HydrationMarkersV2Element) => {
             node.disabled = false;
         });
-        await expect(button).toBeEnabled();
-
         await button.click();
         expect(
             await element.evaluate((node: HydrationMarkersV2Element) => node.count),
         ).toBe(1);
-
-        await element.evaluate((node: HydrationMarkersV2Element) => {
-            node.items = ["three"];
-        });
-        await expect(items).toHaveText(["three"]);
-        expect(
-            await element.evaluate(
-                (node: HydrationMarkersV2Element) =>
-                    node.input === node.shadowRoot!.querySelector("input"),
-            ),
-        ).toBe(true);
     });
 });

From 5822cac50c4ecbdf2bc8f735a21710b707515cba Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:51:32 -0700
Subject: [PATCH 6/6] refactor: separate hydration marker diagnostics

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: c66c1387-9a1b-4386-8d0f-a115ef5706db
---
 packages/fast-element/src/hydration/markers-v2.ts    |  6 ------
 packages/fast-element/src/hydration/markers.ts       |  8 --------
 packages/fast-element/src/hydration/messages.ts      |  7 +++++++
 .../fast-element/src/hydration/target-builder.ts     | 12 ++++++------
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/fast-element/src/hydration/markers-v2.ts b/packages/fast-element/src/hydration/markers-v2.ts
index 0aea504e911..25a64b20475 100644
--- a/packages/fast-element/src/hydration/markers-v2.ts
+++ b/packages/fast-element/src/hydration/markers-v2.ts
@@ -111,12 +111,6 @@ function removeAttributeBindingMarkers(node: Element): void {
  * @public
  */
 export const markers_v2: HydrationMarkers = createHydrationMarkers({
-    expectedContentAfterStartMarker:
-        "content following a `fe-b$$start$$...$$fe-b` content binding marker",
-    expectedContentEndMarker:
-        "matching `fe-b$$end$$...$$fe-b` content binding close marker",
-    expectedElementBoundaryEndMarker:
-        "matching `fe-eb$$end$$...$$fe-eb` element boundary close marker",
     resolveAttributeBindings(
         node: Element,
         factoryPointer: number,
diff --git a/packages/fast-element/src/hydration/markers.ts b/packages/fast-element/src/hydration/markers.ts
index 6b8e1aba025..61f0ad069a1 100644
--- a/packages/fast-element/src/hydration/markers.ts
+++ b/packages/fast-element/src/hydration/markers.ts
@@ -26,9 +26,6 @@ export interface HydrationMarkerResolution {
  * @internal
  */
 export interface HydrationMarkerStrategy extends HydrationMarkers {
-    expectedContentAfterStartMarker: string;
-    expectedContentEndMarker: string;
-    expectedElementBoundaryEndMarker: string;
     resolveAttributeBindings(
         node: Element,
         factoryPointer: number,
@@ -104,11 +101,6 @@ function parseAttributeBindingCount(node: Element): number | null {
  */
 export const HydrationMarkup = createHydrationMarkers({
     attributeMarkerName: "data-fe",
-    expectedContentAfterStartMarker:
-        "content following `<!--fe:b-->` content binding marker",
-    expectedContentEndMarker: "matching `<!--fe:/b-->` content binding close marker",
-    expectedElementBoundaryEndMarker:
-        "matching `<!--fe:/e-->` element boundary close marker",
 
     contentBindingStartMarker(): string {
         return "fe:b";
diff --git a/packages/fast-element/src/hydration/messages.ts b/packages/fast-element/src/hydration/messages.ts
index cd9b09f598b..b1dc4f121c1 100644
--- a/packages/fast-element/src/hydration/messages.ts
+++ b/packages/fast-element/src/hydration/messages.ts
@@ -16,6 +16,13 @@
  */
 export const unknownHostName = "unknown";
 
+// -- Structural expectations -------------------------------------------------
+
+export const expectedContentAfterStartMarker =
+    "content following the content binding start marker";
+export const expectedContentEndMarker = "a matching content binding end marker";
+export const expectedElementBoundaryEndMarker = "a matching element boundary end marker";
+
 // -- Aspect labels (consumed by the opt-in hydrationDebugger) ----------------
 
 export const aspectLabelAttribute = "attribute";
diff --git a/packages/fast-element/src/hydration/target-builder.ts b/packages/fast-element/src/hydration/target-builder.ts
index f8955ea2884..8b2532abd32 100644
--- a/packages/fast-element/src/hydration/target-builder.ts
+++ b/packages/fast-element/src/hydration/target-builder.ts
@@ -11,6 +11,9 @@ import {
 } from "./diagnostics.js";
 import { getHydrationMarkers, type HydrationMarkerStrategy } from "./markers.js";
 import {
+    expectedContentAfterStartMarker,
+    expectedContentEndMarker,
+    expectedElementBoundaryEndMarker,
     formatNoMoreAttributeBindings,
     formatNoMoreContentBindings,
 } from "./messages.js";
@@ -257,11 +260,10 @@ function targetContentBinding(
     node.data = "";
 
     if (current === null) {
-        const expected = markers.expectedContentAfterStartMarker;
         const result = getHydrationDiagnostic().formatStructuralError(
             node,
             getHostName(node),
-            expected,
+            expectedContentAfterStartMarker,
         );
         throw new HydrationTargetElementError(
             result.message,
@@ -290,11 +292,10 @@ function targetContentBinding(
     }
 
     if (current === null) {
-        const expected = markers.expectedContentEndMarker;
         const result = getHydrationDiagnostic().formatStructuralError(
             node,
             getHostName(node),
-            expected,
+            expectedContentEndMarker,
         );
         throw new HydrationTargetElementError(
             result.message,
@@ -357,11 +358,10 @@ function skipToElementBoundaryEnd(
         current = walker.nextSibling();
     }
 
-    const expected = markers.expectedElementBoundaryEndMarker;
     const result = getHydrationDiagnostic().formatStructuralError(
         startNode,
         getHostName(startNode),
-        expected,
+        expectedElementBoundaryEndMarker,
     );
     throw new HydrationTargetElementError(
         result.message,