From c15e21490c2dad6e473a4342f4cf2fbc24399d63 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Fri, 29 May 2026 10:58:48 -0700
Subject: [PATCH] feat: auto-escape code samples inside `<code>` elements

Mirrors the auto-escape behavior of Microsoft WebUI's `webui-press`
markdown renderer so that code samples embedded inside `<code>` blocks
render as literal text instead of being interpreted by the FAST
template parser.

The escape runs as a two-stage pipeline split between the server-side
renderer (`escape_code_sample_elements` in `microsoft-fast-build`) and
the client-side `<f-template>` parser (`escapeBracesInCodeElements` in
`@microsoft/fast-element`):

* Curly braces (`{` / `}`) inside every `<code>` element (text and
  attribute values of any descendant) are replaced with their HTML
  numeric character references (`&#123;` / `&#125;`) on **both**
  server and client, so binding delimiters (`{{...}}`, `{{{...}}}`,
  `{...}`) inside `<code>` render literally. The split is necessary
  because the DOM serializer used by `.innerHTML` decodes the numeric
  references back to literal braces and does not re-encode them, so
  the brace escape has to be re-applied client-side before the binding
  scan runs.

* Angle brackets of FAST directive tags (`<f-when>`, `</f-when>`,
  `<f-repeat>`, `</f-repeat>`, case-insensitive) inside `<code>` are
  entity-escaped to `&lt;` / `&gt;` on the **server only**. The DOM
  serializer re-encodes `<` / `>` in text content automatically, so
  the client never sees a raw directive tag inside `<code>` regardless
  of what the page source contained.

* Real HTML elements (`<button>`) and custom elements (`<my-widget>`)
  inside `<code>` keep their angle brackets and continue to render as
  live DOM elements; only brace-binding syntax in their attribute
  values is neutralised. This lets authors mix interactive demo
  elements with surrounding code text in the same `<code>` block.

A new `escape_code_samples(html)` WASM export wraps the escape so
build-time tooling can apply it to author HTML that is injected into a
rendered page outside the normal `render_*` pipeline (for example, the
fast-element declarative fixture builder injecting `<f-template>`
declarations).

Fixes microsoft/fast#7520.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...-96416f46-7e1a-4d19-ab7f-e5c83bc07aa6.json |   7 +
 ...-e20e07d7-c8d3-4207-b936-127afe6fe744.json |   7 +
 crates/microsoft-fast-build/DESIGN.md         |  87 ++-
 .../microsoft-fast-build/src/code_escape.rs   | 718 ++++++++++++++++++
 crates/microsoft-fast-build/src/lib.rs        |   1 +
 crates/microsoft-fast-build/src/locator.rs    | 196 ++++-
 crates/microsoft-fast-build/src/renderer.rs   |  10 +-
 crates/microsoft-fast-build/src/wasm.rs       | 128 +++-
 packages/fast-element/SIZES.md                |   4 +-
 .../fast-element/docs/declarative-design.md   |   1 +
 .../fast-element/docs/declarative-html.md     |  22 +
 .../scripts/declarative/build-fixtures.js     |  10 +-
 .../fast-element/src/declarative/template.ts  |   4 +-
 .../fast-element/src/declarative/utilities.ts | 267 +++++++
 .../scenarios/code-sample/code-sample.spec.ts | 101 +++
 .../fixtures/scenarios/code-sample/entry.html |  11 +
 .../code-sample/fast-build.config.json        |   6 +
 .../fixtures/scenarios/code-sample/index.html |  33 +
 .../fixtures/scenarios/code-sample/main.ts    |  28 +
 .../fixtures/scenarios/code-sample/state.json |   3 +
 .../scenarios/code-sample/templates.html      |  13 +
 21 files changed, 1567 insertions(+), 90 deletions(-)
 create mode 100644 change/@microsoft-fast-build-96416f46-7e1a-4d19-ab7f-e5c83bc07aa6.json
 create mode 100644 change/@microsoft-fast-element-e20e07d7-c8d3-4207-b936-127afe6fe744.json
 create mode 100644 crates/microsoft-fast-build/src/code_escape.rs
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/code-sample.spec.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/entry.html
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/fast-build.config.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/index.html
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/main.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/state.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/scenarios/code-sample/templates.html

diff --git a/change/@microsoft-fast-build-96416f46-7e1a-4d19-ab7f-e5c83bc07aa6.json b/change/@microsoft-fast-build-96416f46-7e1a-4d19-ab7f-e5c83bc07aa6.json
new file mode 100644
index 00000000000..13044ef5d4d
--- /dev/null
+++ b/change/@microsoft-fast-build-96416f46-7e1a-4d19-ab7f-e5c83bc07aa6.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: auto-escape code samples inside `<code>` elements during SSR — braces (`{`/`}`) everywhere and the angle brackets of FAST directive tags (`<f-when>`, `<f-repeat>`) — so literal binding-like text and directive syntax render correctly while real HTML/custom elements inside `<code>` remain live DOM elements. Also exposes a new `escape_code_samples(html)` WASM export so build-time tooling can apply the same escape to author HTML that is injected into a rendered page outside the normal render pipeline.",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-element-e20e07d7-c8d3-4207-b936-127afe6fe744.json b/change/@microsoft-fast-element-e20e07d7-c8d3-4207-b936-127afe6fe744.json
new file mode 100644
index 00000000000..f76530084fa
--- /dev/null
+++ b/change/@microsoft-fast-element-e20e07d7-c8d3-4207-b936-127afe6fe744.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: auto-escape `{` and `}` inside `<code>` elements so binding-like syntax in code samples renders as literal text (mirrors webui-press and the server-side `escape_code_sample_elements` pass in `@microsoft/fast-build`, which additionally handles `<f-when>`/`<f-repeat>` directive tags)",
+  "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 cc18d314d15..b68e749815e 100644
--- a/crates/microsoft-fast-build/DESIGN.md
+++ b/crates/microsoft-fast-build/DESIGN.md
@@ -21,7 +21,7 @@ render_template(template, state_str)
   node::render_node(template, root, loop_vars, locator, hydration?)     │
         │                                                                │
         ├─ [hydration mode] scan HTML opening tags for attr bindings     │
-        │        └─ inject data-fe="N" attribute markers                 │
+        │        └─ inject data-fe-c-{n}-{count} compact markers        │
         │                                                                │
         ├─ scan forward: next_directive()                                │
         │        │                                                       │
@@ -41,7 +41,7 @@ render_template(template, state_str)
 | Module | Role |
 |--------|------|
 | `lib.rs` | Public API surface — render functions, `pub use` re-exports, and config types |
-| `renderer.rs` | Thin entry points converting the public API into `render_node` calls |
+| `renderer.rs` | Thin entry points converting the public API into `render_node` calls. Preprocesses the top-level `template` string through `escape_code_sample_elements` so `{`/`}` characters (and the angle brackets of FAST directive tags such as `<f-when>` / `<f-repeat>`) inside any `<code>` element are entity-escaped before binding/directive scanning |
 | `node.rs` | The main rendering loop — scans for directives, handles attribute bindings in hydration mode |
 | `directive.rs` | `Directive` enum, `next_directive` scanner, and all directive renderers |
 | `content.rs` | `{{expr}}` and `{{{expr}}}` binding renderers, `html_escape` |
@@ -52,9 +52,10 @@ render_template(template, state_str)
 | `expression.rs` | Boolean expression evaluator for `<f-when value="{{…}}">` |
 | `hydration.rs` | `HydrationScope` — binding index tracking and named 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 |
+| `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 |
 | `error.rs` | `RenderError` enum with `Display` impl and helpers |
-| `wasm.rs` | WASM bindings (`#[cfg(target_arch = "wasm32")]`) — exposes `render`, `render_with_templates`, `render_entry_with_templates`, and `parse_f_templates` to JavaScript |
+| `wasm.rs` | WASM bindings (`#[cfg(target_arch = "wasm32")]`) — exposes `render`, `render_with_templates`, `render_entry_with_templates`, `parse_f_templates`, and `escape_code_samples` (a stand-alone wrapper around `escape_code_sample_elements` for build-time tooling that injects raw author HTML — for example `<f-template>` definitions — into a rendered page outside the normal `render_*` pipeline) to JavaScript |
 
 ---
 
@@ -68,8 +69,8 @@ fn render_node(template, root, loop_vars, locator, hydration: Option<&mut Hydrat
 
 The `is_entry` flag distinguishes two rendering contexts for **opening-tag attribute handling**:
 
-- **`is_entry: true`** — the template is the top-level entry HTML. Custom elements found at this level (root custom elements) have their opening-tag `{{binding}}` attributes resolved to primitive values (stripping non-primitives). No `data-fe` marker is added.
-- **`is_entry: false`** — the template is a shadow template, a directive body, or a repeat item. Custom elements found here have their `{{binding}}` attributes resolved and a `data-fe` marker injected when inside a parent hydration scope.
+- **`is_entry: true`** — the template is the top-level entry HTML. Custom elements found at this level (root custom elements) have their opening-tag `{{binding}}` attributes resolved to primitive values (stripping non-primitives). No `data-fe-c` marker is added.
+- **`is_entry: false`** — the template is a shadow template, a directive body, or a repeat item. Custom elements found here have their `{{binding}}` attributes resolved and a `data-fe-c` compact marker injected when inside a parent hydration scope.
 
 **Child state** is built the same way regardless of `is_entry`: the current root state is always used as a base, with per-element attributes overlaid on top. This ensures all unbound state keys propagate through to every descendant custom element automatically.
 
@@ -77,11 +78,11 @@ The `is_entry` flag distinguishes two rendering contexts for **opening-tag attri
 
 The loop works like a cursor:
 
-1. **Hydration tag scan** (when `hydration` is `Some`): before each directive, scan for any plain HTML opening tags in the literal region that precede the directive position. For each such tag, detect `{{expr}}` and `{expr}` attribute bindings, allocate binding indices, resolve `{{expr}}` values, and inject a `data-fe="N"` attribute. This step advances `pos` past each processed tag so those tags' `{{expr}}` bindings are not re-encountered as content directives.
+1. **Hydration tag scan** (when `hydration` is `Some`): before each directive, scan for any plain HTML opening tags in the literal region that precede the directive position. For each such tag, detect `{{expr}}` and `{expr}` attribute bindings, allocate binding indices, resolve `{{expr}}` values, and inject a compact `data-fe-c-{start}-{count}` attribute. This step advances `pos` past each processed tag so those tags' `{{expr}}` bindings are not re-encountered as content directives.
 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 `<!--fe-b$$start$$N$$UUID$$fe-b-->VALUE<!--fe-b$$end$$...-->` markers.
 6. Append `chunk` and advance `pos` to `next_pos`.
 7. Repeat.
 
@@ -118,7 +119,7 @@ The skip logic lives in `attribute::find_single_brace` and `attribute::skip_sing
 
 ### Attribute directive stripping in Declarative Shadow DOM
 
-Attribute directives — `f-ref="{expr}"`, `f-slotted="{expr}"`, `f-children="{expr}"` — use single-brace syntax and are **client-side only**. When rendering a custom element's shadow DOM template (where hydration is always active), `attribute::strip_client_only_attrs` removes these attributes from the output HTML, exactly as it removes `@event` and `:property` bindings. The `data-fe` binding count still includes them so the FAST runtime allocates the correct binding slots.
+Attribute directives — `f-ref="{expr}"`, `f-slotted="{expr}"`, `f-children="{expr}"` — use single-brace syntax and are **client-side only**. When rendering a custom element's shadow DOM template (where hydration is always active), `attribute::strip_client_only_attrs` removes these attributes from the output HTML, exactly as it removes `@event` and `:property` bindings. The `data-fe-c` compact binding count still includes them so the FAST runtime allocates the correct binding slots.
 
 ---
 
@@ -245,10 +246,30 @@ A custom element is any opening tag whose name contains a hyphen, excluding `f-w
      - **Non-primitives** (`Array`, `Object`, `Null`) and missing values — stripped. Arrays and objects cannot be meaningfully represented as HTML attribute values; the state is available directly in the element's template via state propagation. Because of this, same-name non-primitive bindings like `list="{{list}}"` are redundant in entry HTML and can be omitted — state propagation provides the value automatically.
      - **Static attributes** (no binding syntax, e.g. `id="main"`) — passed through unchanged.
      - **Client-only attrs** (`@event`, `:prop`, attribute directives) — stripped as usual.
-     - No `data-fe` marker is added — root elements at entry level have no parent hydration scope.
-   - **Nested custom elements** (`is_entry: false`): `strip_client_only_attrs` removes client-only attrs after binding resolution. If the element carries `{{expr}}` or `{expr}` attribute bindings and is inside a parent hydration scope, those bindings are counted and `data-fe="N"` is injected.
-8. **Strip client-only binding attributes** (`@attr` event bindings, `:attr` property bindings, and `f-ref`/`f-slotted`/`f-children` attribute directives) from all tags inside the rendered shadow template. `:attr` bindings contribute to child state in step 4 but are still removed from the rendered HTML — they are resolved by the FAST client runtime. The `data-fe` binding count is preserved — these bindings are still counted so the FAST client runtime allocates the correct number of binding slots.
-9. **Emit Declarative Shadow DOM** with hydration attributes:
+     - No `data-fe-c` marker is added — root elements at entry level have no parent hydration scope.
+   - **Nested custom elements** (`is_entry: false`): `strip_client_only_attrs` removes client-only attrs after binding resolution. If the element carries `{{expr}}` or `{expr}` attribute bindings and is inside a parent hydration scope, those bindings are counted and `data-fe-c-{start}-{count}` is injected.
+8. **Template host attribute propagation.** Attributes declared on the inner `<template>` element of the source `<f-template>` are merged onto the rendered host opening tag built in step 7. `merge_template_host_attrs` (in `directive.rs`) splices the surviving attributes in just before the closing `>`, resolving any bindings against `child_root` — the same child state used to render the shadow template (the root state with the host element's HTML attributes overlaid).
+   - **Client-only attrs are skipped**: any template host attr whose name starts with `@` (event) or `:` (property binding), or whose lowercased name is `f-ref`, `f-slotted`, or `f-children`, is dropped — none of these have any meaning on a server-rendered host element.
+   - **Author attributes win.** Attributes already present on the host element opening tag (the author markup) are preserved verbatim. Template host attrs whose lowercased name matches an existing author attribute are skipped. For `?name="{{expr}}"` template attrs, the dedupe key is the bare `name` (without the leading `?`).
+   - **Static `name="value"`** → emitted verbatim with the value HTML-escaped. **Static boolean `name`** (no `=`) → emitted bare.
+   - **`name="{{expr}}"`** → resolved against `child_root`. `String` / `Number` / `Bool` values are emitted as `name="value"` (HTML-escaped); `Array` / `Object` / `Null` and missing values are stripped.
+   - **`?name="{{expr}}"`** → evaluated as a boolean against `child_root`; the bare `name` (without the leading `?`) is emitted when truthy and skipped when falsy.
+   - Applies to **both** root entry-level custom elements (`is_entry: true`) and nested custom elements (`is_entry: false`).
+   - **No `data-fe-c` hydration marker is allocated** for propagated template host attrs — they are static or initial-render-only attributes on the host element, not client-side bindings.
+
+   *Worked example.* Given the template
+   ```html
+   <f-template name="my-el">
+       <template tabindex="0" ?disabled="{{isDisabled}}">…</template>
+   </f-template>
+   ```
+   the author markup `<my-el disabled></my-el>` and state `{"isDisabled": false}` render as
+   ```html
+   <my-el disabled tabindex="0">…</my-el>
+   ```
+   — the author's `disabled` is preserved verbatim, the template's `?disabled` is dropped by the dedupe rule, and `tabindex="0"` is appended.
+9. **Strip client-only binding attributes** (`@attr` event bindings, `:attr` property bindings, and `f-ref`/`f-slotted`/`f-children` attribute directives) from all tags inside the rendered shadow template. `:attr` bindings contribute to child state in step 4 but are still removed from the rendered HTML — they are resolved by the FAST client runtime. The `data-fe-c` binding count is preserved — these bindings are still counted so the FAST client runtime allocates the correct number of binding slots.
+10. **Emit Declarative Shadow DOM** with hydration attributes:
    ```html
    <my-button label="Hi">
      <template shadowrootmode="open" shadowroot="open">[shadow DOM]</template>
@@ -257,7 +278,7 @@ A custom element is any opening tag whose name contains a hyphen, excluding `f-w
    ```
    The `<template>` receives any `shadowroot*` attributes declared on the source `<f-template>`. The renderer 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.
 
-   When a nested element has attribute bindings (`{{expr}}` or `{expr}` values) and is being rendered inside another element's shadow (i.e., `parent_hydration` is `Some`), those bindings are counted, `data-fe="N"` is added to the element's opening tag, and the binding indices are allocated from the parent scope.
+   When a nested element has attribute bindings (`{{expr}}` or `{expr}` values) and is being rendered inside another element's shadow (i.e., `parent_hydration` is `Some`), those bindings are counted, `data-fe-c-{start}-{count}` is added to the element's opening tag, and the binding indices are allocated from the parent scope.
 
 Note: `is_entry` controls only opening-tag attribute handling. Child state is always built using the current root state as a base with per-element attributes overlaid on top, regardless of the `is_entry` flag.
 
@@ -327,19 +348,19 @@ Scope boundaries are:
 | `f-when` truthy body | Child scope via `hy.child()` (binding_idx reset to 0) |
 | `f-repeat` item template | Fresh `HydrationScope` per item (binding_idx reset to 0) |
 
-Scopes carry no numeric ID. Markers are data-free sequential strings matched by string equality; pairing uses balanced depth counting.
+Scopes carry no numeric ID. Marker names are derived from the binding context (see below) and are therefore self-describing.
 
 ### Content binding markers
 
 When `hydration` is `Some`, `render_node` wraps each `{{expr}}` / `{{{expr}}}` result:
 
 ```
-<!--fe:b-->VALUE<!--fe:/b-->
+<!--fe-b$$start$$N$$<expr>-N$$fe-b-->VALUE<!--fe-b$$end$$N$$<expr>-N$$fe-b-->
 ```
 
-Markers carry no binding index or expression name. They are paired by balanced depth counting — each `<!--fe:b-->` increments a counter and each `<!--fe:/b-->` decrements it; when the counter returns to zero the pair is complete.
+`N` is the current `binding_idx` from the scope; `<expr>` is the expression text (e.g. `title`, `item.name`, `$index`). So `{{title}}` at index 0 produces marker name `title-0`, and `{{item.name}}` at index 2 produces `item.name-2`.
 
-### Attribute binding markers
+### Attribute binding markers (compact format)
 
 Plain HTML opening tags in the literal regions are scanned by `attribute::find_next_plain_html_tag` **before** `next_directive` processes them. For each tag that has `{{expr}}` (double-brace) or `{expr}` (single-brace) attribute values:
 
@@ -349,7 +370,7 @@ Plain HTML opening tags in the literal regions are scanned by `attribute::find_n
    - `?attr="{{expr}}"` — **boolean binding**: `expr` is evaluated as a boolean. If truthy, the bare attribute name (without `?`) is emitted; if falsy, the attribute is omitted entirely. The `extract_bool_attr_prefix` helper detects this pattern by checking whether the output accumulated so far ends with `?name="`.
    - `attr="{{expr}}"` — **value binding**: `expr` is resolved to a string and HTML-escaped. If `expr` is missing, the entire attribute is omitted, though the hydration binding count still includes it.
    - `attr="{expr}"` — **single-brace binding**: left unchanged (client-side only).
-4. `inject_marker` inserts `data-fe="N"` (where `N` is the binding count) before the closing `>` of the tag.
+4. `inject_compact_marker` inserts `data-fe-c-{start}-{count}` before the closing `>` of the tag.
 
 This atomic tag processing ensures that the `{{expr}}` attribute values are never seen as content directives by the main loop — `pos` advances past the entire tag before the directive scanner runs again.
 
@@ -397,27 +418,27 @@ contenteditable="true"   →  state["contentEditable"] = "true"
 ### `f-when` markers
 
 ```
-<!--fe:b-->
+<!--fe-b$$start$$N$$when-N$$fe-b-->
 [inner content in child scope, or empty if falsy]
-<!--fe:/b-->
+<!--fe-b$$end$$N$$when-N$$fe-b-->
 ```
 
-The binding index `N` is allocated from the outer (parent) scope's `binding_idx`. The markers are data-free and paired by balanced depth counting.
+`N` is allocated from the outer (parent) scope's `binding_idx`. The marker name is `when-N`.
 
 ### `f-repeat` markers
 
 ```
-<!--fe:b-->
-<!--fe:r-->
+<!--fe-b$$start$$N$$repeat-N$$fe-b-->
+<!--fe-repeat$$start$$0$$fe-repeat-->
   [item 0 rendered with fresh binding_idx = 0]
-<!--fe:/r-->
-<!--fe:r-->
+<!--fe-repeat$$end$$0$$fe-repeat-->
+<!--fe-repeat$$start$$1$$fe-repeat-->
   [item 1 rendered with fresh binding_idx = 0]
-<!--fe:/r-->
-<!--fe:/b-->
+<!--fe-repeat$$end$$1$$fe-repeat-->
+<!--fe-b$$end$$N$$repeat-N$$fe-b-->
 ```
 
-The outer `<!--fe:b-->` / `<!--fe:/b-->` markers wrap the entire repeat directive. Each item is wrapped in `<!--fe:r-->` / `<!--fe:/r-->` markers. All markers are data-free; pairing uses balanced depth counting. Each item gets its own fresh `HydrationScope`, so per-item content bindings restart at index 0.
+The outer markers use `repeat-N` where `N` is the binding index in the parent scope. Each item gets its own fresh `HydrationScope`, so per-item content bindings are named after their expressions (e.g. `item-0`, `item.name-1`).
 
 ### `$index` in `f-repeat`
 
@@ -448,9 +469,9 @@ For each glob pattern:
 - Uses `parse_element_attributes` to get the `name` attribute value (supports both `"` and `'` quoting).
 - Collects all unique `shadowroot`-prefixed attributes from the `<f-template>` opening tag, preserving boolean attributes as `None` and lowercasing attribute names.
 - Extracts the inner HTML between `>` and `</f-template>`.
-- Calls `extract_template_content` on the inner HTML to get the content inside the `<template>` element.
+- Calls `extract_template_content` on the inner HTML to get the content **and the attributes** declared on the inner `<template>` element. The returned attribute list is preserved as the template's **host attributes**, available later via `Locator::get_host_attributes` and merged onto the rendered host opening tag by `merge_template_host_attrs` (see the **Custom elements** section above).
 
-Returns a `Vec<FTemplate>` containing the optional name, template content, and the collected shadowroot attributes. The locator stores those attributes with the template definition so custom-element rendering can apply them to the emitted Declarative Shadow DOM `<template>`.
+Returns a `Vec<FTemplate>` containing the optional name, template content, the collected shadowroot attributes, and the inner `<template>` element's host attributes. The locator stores the shadowroot attributes with the template definition so custom-element rendering can apply them to the emitted Declarative Shadow DOM `<template>`, and stores the host attributes so they can be merged onto the rendered host element opening tag.
 
 ### Glob matching
 
@@ -570,9 +591,9 @@ 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`.
 
-**Named hydration markers.** Markers are data-free fixed strings (`<!--fe:b-->`, `<!--fe:/b-->`, `<!--fe:r-->`, `<!--fe:/r-->`) matched by string equality — no regex parsing required. Pairing uses balanced depth counting rather than ID matching. `HydrationScope` needs only `binding_idx` — no `Rc`, no `scope_id`, no `ScopeGen`.
+**Named hydration markers.** Marker names are derived from the binding context: content bindings use `<expr>-<idx>` (e.g. `title-0`, `item.name-2`), f-when uses `when-<idx>`, and f-repeat uses `repeat-<idx>`. This makes markers human-readable and self-describing without a shared ID counter. `HydrationScope` needs only `binding_idx` — no `Rc`, no `scope_id`, no `ScopeGen`. The scheme differs from the FAST HTML package which uses random alphanumeric UUIDs, but the structure is equivalent.
 
-**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.
+**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-c` 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.
 
 **`Result` throughout.** All render functions return `Result<_, RenderError>`. Errors propagate via `?` for malformed templates, invalid JSON, invalid repeat expressions, and invalid directive state. Missing optional values are handled by binding context: content bindings render empty output, attribute bindings omit the attribute, `<f-when>` treats the value as falsy, and `<f-repeat>` treats a missing list binding as an empty array while still erroring when a present value is not an array.
 
diff --git a/crates/microsoft-fast-build/src/code_escape.rs b/crates/microsoft-fast-build/src/code_escape.rs
new file mode 100644
index 00000000000..2374c38d3d5
--- /dev/null
+++ b/crates/microsoft-fast-build/src/code_escape.rs
@@ -0,0 +1,718 @@
+//! Auto-escape FAST template syntax inside `<code>` elements so that
+//! code samples render as literal text without disabling real DOM
+//! elements that happen to live inside the sample.
+//!
+//! FAST templates that include code samples often contain literal text
+//! such as `{{greeting}}` or `<f-when value="…">…</f-when>` that the
+//! template parser would otherwise interpret as data bindings or
+//! directives. Mirroring the approach taken by Microsoft WebUI's
+//! `webui-press` markdown renderer (`crates/webui-press/src/markdown.rs`),
+//! this preprocessing pass walks the input HTML, finds every `<code>`
+//! element, and rewrites its content as follows:
+//!
+//! - Every `{` becomes `&#123;` and every `}` becomes `&#125;`, in
+//!   text *and* in attribute values of any descendant element. This
+//!   neutralises both the text-binding (`{{x}}`, `{{{x}}}`) and the
+//!   attribute-binding (`{x}`) delimiters everywhere inside the code
+//!   sample.
+//! - The `<` and `>` of every `<f-when>` / `</f-when>` /
+//!   `<f-repeat>` / `</f-repeat>` tag (open, close, or self-closing)
+//!   are rewritten as `&lt;` / `&gt;` so the FAST parser does not
+//!   match the directive substring. Non-directive elements — real
+//!   HTML elements (`<button>`, `<span>`) and custom elements
+//!   (`<my-widget>`) — are left intact so they continue to render
+//!   as real DOM elements inside the code sample.
+//!
+//! Existing `&`-prefixed entity references (`&amp;`, `&lt;`,
+//! `&#123;`, …) are deliberately **not** re-encoded so previously
+//! escaped content is preserved verbatim. The pass is a no-op for
+//! input that does not contain a `<code` substring, and is
+//! idempotent: a second pass over already-preprocessed HTML produces
+//! the same output (no unescaped braces remain, and no raw directive
+//! tags remain, inside any `<code>` element).
+//!
+//! ## Division of responsibility with the client-side parser
+//!
+//! The client-side `<f-template>` parser also applies a brace-only
+//! escape (`escapeBracesInCodeElements` in `@microsoft/fast-html`).
+//! That client pass is required because `&#123;` / `&#125;` entity
+//! references are *decoded* into literal `{` / `}` characters by the
+//! browser's HTML parser when the page is loaded, and the DOM
+//! serializer used by `.innerHTML` does not re-encode them — so a
+//! server-side brace escape alone would be undone by the time the
+//! client parses the template. `<` and `>`, by contrast, *are*
+//! re-encoded by the serializer (they're "must-escape" characters
+//! for text-node content), so escaping them server-side is
+//! sufficient — the client never sees a raw `<f-when>` tag inside
+//! `<code>` regardless of what the author originally wrote. The
+//! Rust crate is therefore solely responsible for directive-tag
+//! neutralisation; the JS pass only re-applies the brace escape.
+
+/// HTML void elements that have no content and therefore no matching
+/// close tag. Included for completeness in `parse_opening_tag` so a
+/// `<code />` style self-closing form is handled correctly even though
+/// the parser also recognises the explicit XHTML-style self-close.
+const VOID_ELEMENTS: &[&str] = &[
+    "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta",
+    "param", "source", "track", "wbr",
+];
+
+const CODE_ELEMENT: &str = "code";
+
+/// FAST directive tag names whose `<` / `>` are rewritten when they
+/// appear inside a `<code>` element. The set is deliberately narrow:
+/// it must mirror the literal-substring patterns the `@microsoft/fast-html`
+/// runtime parser scans for (`syntax.ts` → `repeatDirectiveOpen` /
+/// `whenDirectiveOpen` etc.) so that no FAST directive can survive
+/// inside a code sample, while leaving every non-directive element
+/// (including user-authored custom elements) functional as part of
+/// the rendered sample.
+const DIRECTIVE_TAGS: &[&str] = &["f-when", "f-repeat"];
+
+/// Apply `<code>` code-sample escape preprocessing to an HTML string.
+/// Returns a new string with `{` / `}` characters replaced by their
+/// HTML numeric character references (`&#123;` / `&#125;`) inside every
+/// `<code>` element, and with the `<` / `>` of every FAST directive
+/// tag (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) inside
+/// `<code>` rewritten as `&lt;` / `&gt;`. Non-directive elements
+/// inside `<code>` keep their angle brackets so they render as real
+/// DOM elements. Content outside `<code>` is left untouched.
+pub fn escape_code_sample_elements(html: &str) -> String {
+    if !html.contains("<code") {
+        return html.to_string();
+    }
+
+    let bytes = html.as_bytes();
+    let mut result = String::with_capacity(html.len());
+    let mut pos = 0;
+
+    while pos < bytes.len() {
+        let lt = match find_byte(bytes, pos, b'<') {
+            Some(p) => p,
+            None => {
+                result.push_str(&html[pos..]);
+                break;
+            }
+        };
+
+        if html[lt..].starts_with("<!--") {
+            let end = html[lt + 4..]
+                .find("-->")
+                .map(|e| lt + 4 + e + 3)
+                .unwrap_or(html.len());
+            result.push_str(&html[pos..end]);
+            pos = end;
+            continue;
+        }
+
+        let opening = match parse_opening_tag(html, lt) {
+            Some(o) => o,
+            None => {
+                result.push_str(&html[pos..lt + 1]);
+                pos = lt + 1;
+                continue;
+            }
+        };
+
+        if opening.tag_name != CODE_ELEMENT {
+            result.push_str(&html[pos..opening.tag_end]);
+            pos = opening.tag_end;
+            continue;
+        }
+
+        result.push_str(&html[pos..opening.tag_end]);
+
+        if opening.is_self_closing {
+            pos = opening.tag_end;
+            continue;
+        }
+
+        let close_start =
+            find_matching_close_tag(html, opening.content_start, CODE_ELEMENT);
+        let inner = &html[opening.content_start..close_start];
+        result.push_str(&escape_code_sample_inner(inner));
+        pos = close_start;
+    }
+
+    result
+}
+
+struct OpeningTag {
+    tag_name: String,
+    tag_end: usize,
+    content_start: usize,
+    is_self_closing: bool,
+}
+
+fn find_byte(bytes: &[u8], start: usize, needle: u8) -> Option<usize> {
+    bytes[start..]
+        .iter()
+        .position(|&b| b == needle)
+        .map(|p| p + start)
+}
+
+fn is_attr_name_byte(b: u8) -> bool {
+    !matches!(
+        b,
+        b' ' | b'\t' | b'\n' | b'\r' | b'\x0C' | b'=' | b'>' | b'/'
+    )
+}
+
+fn parse_opening_tag(html: &str, pos: usize) -> Option<OpeningTag> {
+    let bytes = html.as_bytes();
+    if pos >= bytes.len() || bytes[pos] != b'<' {
+        return None;
+    }
+    let next = bytes.get(pos + 1).copied().unwrap_or(0);
+    if next == b'/' || next == b'!' || next == b'?' {
+        return None;
+    }
+    if !next.is_ascii_alphabetic() {
+        return None;
+    }
+
+    let mut name_end = pos + 1;
+    while name_end < bytes.len() {
+        let b = bytes[name_end];
+        if b.is_ascii_alphanumeric() || b == b'-' {
+            name_end += 1;
+        } else {
+            break;
+        }
+    }
+    let tag_name = html[pos + 1..name_end].to_ascii_lowercase();
+    if tag_name.is_empty() {
+        return None;
+    }
+
+    let mut cursor = name_end;
+
+    while cursor < bytes.len() {
+        while cursor < bytes.len() && bytes[cursor].is_ascii_whitespace() {
+            cursor += 1;
+        }
+        if cursor >= bytes.len() {
+            return None;
+        }
+        let b = bytes[cursor];
+        if b == b'>' {
+            break;
+        }
+        if b == b'/' && bytes.get(cursor + 1).copied() == Some(b'>') {
+            break;
+        }
+        while cursor < bytes.len() && is_attr_name_byte(bytes[cursor]) {
+            cursor += 1;
+        }
+        let mut after = cursor;
+        while after < bytes.len() && bytes[after].is_ascii_whitespace() {
+            after += 1;
+        }
+        if bytes.get(after).copied() == Some(b'=') {
+            cursor = after + 1;
+            while cursor < bytes.len() && bytes[cursor].is_ascii_whitespace() {
+                cursor += 1;
+            }
+            let quote = bytes.get(cursor).copied().unwrap_or(0);
+            if quote == b'"' || quote == b'\'' {
+                let q_end = find_byte(bytes, cursor + 1, quote);
+                cursor = q_end.map(|e| e + 1).unwrap_or(bytes.len());
+            } else {
+                while cursor < bytes.len()
+                    && !bytes[cursor].is_ascii_whitespace()
+                    && bytes[cursor] != b'>'
+                {
+                    cursor += 1;
+                }
+            }
+        }
+    }
+
+    let mut is_self_closing = false;
+    if bytes.get(cursor).copied() == Some(b'/') && bytes.get(cursor + 1).copied() == Some(b'>') {
+        is_self_closing = true;
+        cursor += 2;
+    } else if bytes.get(cursor).copied() == Some(b'>') {
+        cursor += 1;
+    } else {
+        return None;
+    }
+
+    if VOID_ELEMENTS.iter().any(|v| *v == tag_name) {
+        is_self_closing = true;
+    }
+
+    Some(OpeningTag {
+        tag_name,
+        tag_end: cursor,
+        content_start: cursor,
+        is_self_closing,
+    })
+}
+
+fn find_matching_close_tag(html: &str, content_start: usize, tag_name: &str) -> usize {
+    let bytes = html.as_bytes();
+    let mut depth = 1usize;
+    let mut pos = content_start;
+    let close_needle = format!("</{}", tag_name);
+
+    while pos < bytes.len() {
+        let lt = match find_byte(bytes, pos, b'<') {
+            Some(p) => p,
+            None => return html.len(),
+        };
+
+        if html[lt..].len() >= close_needle.len() {
+            let slice_lower = html[lt..lt + close_needle.len()].to_ascii_lowercase();
+            if slice_lower == close_needle {
+                let after = bytes.get(lt + close_needle.len()).copied().unwrap_or(0);
+                if after == b'>' || after.is_ascii_whitespace() {
+                    depth -= 1;
+                    if depth == 0 {
+                        return lt;
+                    }
+                    let gt = find_byte(bytes, lt, b'>');
+                    pos = gt.map(|e| e + 1).unwrap_or(html.len());
+                    continue;
+                }
+            }
+        }
+
+        if html[lt..].starts_with("<!--") {
+            let end = html[lt + 4..]
+                .find("-->")
+                .map(|e| lt + 4 + e + 3)
+                .unwrap_or(html.len());
+            pos = end;
+            continue;
+        }
+        let nb = bytes.get(lt + 1).copied().unwrap_or(0);
+        if nb == b'!' || nb == b'?' || nb == b'/' {
+            let gt = find_byte(bytes, lt, b'>');
+            pos = gt.map(|e| e + 1).unwrap_or(html.len());
+            continue;
+        }
+
+        match parse_opening_tag(html, lt) {
+            Some(opening) => {
+                if opening.tag_name == tag_name && !opening.is_self_closing {
+                    depth += 1;
+                }
+                pos = opening.tag_end;
+            }
+            None => {
+                pos = lt + 1;
+            }
+        }
+    }
+
+    html.len()
+}
+
+/// Two-pass escape for the inner content of a single `<code>` element.
+/// Pass 1 neutralises every brace; pass 2 rewrites the `<` / `>` of
+/// FAST directive tags only. The order does not matter for
+/// correctness — `parse_opening_tag` ignores `{` / `}` characters and
+/// the brace pass ignores `<` / `>` — but doing braces first keeps the
+/// directive scanner free of binding-syntax noise inside attribute
+/// values.
+fn escape_code_sample_inner(s: &str) -> String {
+    let with_braces = escape_braces_in_text(s);
+    escape_directive_tag_angles(&with_braces)
+}
+
+/// Byte-scan: find the next `{` or `}`, bulk-copy the rest. Mirrors
+/// the `emit_escaped` helper in `webui-press` (modulo `&`/`<`/`>`,
+/// which we intentionally leave alone here so pre-existing entity
+/// references are preserved verbatim and so non-directive markup
+/// continues to render as real elements).
+fn escape_braces_in_text(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = String::with_capacity(s.len());
+    let mut start = 0;
+    for (i, &b) in bytes.iter().enumerate() {
+        let esc = match b {
+            b'{' => "&#123;",
+            b'}' => "&#125;",
+            _ => continue,
+        };
+        out.push_str(&s[start..i]);
+        out.push_str(esc);
+        start = i + 1;
+    }
+    out.push_str(&s[start..]);
+    out
+}
+
+/// Walk the input and, for every FAST directive tag (open, close, or
+/// self-closing) found, rewrite the entire tag with its `<` / `>`
+/// characters replaced by `&lt;` / `&gt;`. Any raw `<` or `>` inside
+/// the tag — for example the angle brackets of an operator in an
+/// attribute value — are also rewritten so the browser doesn't
+/// misparse the resulting text. Tags that are not FAST directives
+/// are left untouched.
+fn escape_directive_tag_angles(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = String::with_capacity(s.len());
+    let mut pos = 0;
+
+    while pos < bytes.len() {
+        let lt = match find_byte(bytes, pos, b'<') {
+            Some(p) => p,
+            None => {
+                out.push_str(&s[pos..]);
+                break;
+            }
+        };
+        out.push_str(&s[pos..lt]);
+
+        if let Some(tag_end) = match_directive_tag(s, lt) {
+            out.push_str(&escape_html_angles(&s[lt..tag_end]));
+            pos = tag_end;
+        } else {
+            out.push('<');
+            pos = lt + 1;
+        }
+    }
+
+    out
+}
+
+/// Replace every `<` with `&lt;` and every `>` with `&gt;` in the
+/// input. Used to rewrite a complete directive tag (including any
+/// stray angle brackets that appear inside attribute values).
+fn escape_html_angles(s: &str) -> String {
+    let bytes = s.as_bytes();
+    let mut out = String::with_capacity(s.len());
+    let mut start = 0;
+    for (i, &b) in bytes.iter().enumerate() {
+        let esc = match b {
+            b'<' => "&lt;",
+            b'>' => "&gt;",
+            _ => continue,
+        };
+        out.push_str(&s[start..i]);
+        out.push_str(esc);
+        start = i + 1;
+    }
+    out.push_str(&s[start..]);
+    out
+}
+
+/// If `s[pos..]` begins with a FAST directive tag (open, close, or
+/// self-closing), returns `Some(tag_end)` where `tag_end` is the byte
+/// index immediately past the tag's closing `>`. Otherwise returns
+/// `None`. Tag name matching is ASCII-case-insensitive because
+/// browsers normalise HTML tag names to lowercase during parsing —
+/// an unescaped `<F-When>` would become a live `<f-when>` element
+/// after the DOM round-trip and re-activate the directive.
+fn match_directive_tag(s: &str, pos: usize) -> Option<usize> {
+    let bytes = s.as_bytes();
+    if bytes.get(pos).copied() != Some(b'<') {
+        return None;
+    }
+    let is_close = bytes.get(pos + 1).copied() == Some(b'/');
+    let name_start = if is_close { pos + 2 } else { pos + 1 };
+
+    let directive = DIRECTIVE_TAGS
+        .iter()
+        .copied()
+        .find(|d| slice_eq_ascii_ci(s, name_start, d))?;
+    let after_name = name_start + directive.len();
+    let next = bytes.get(after_name).copied().unwrap_or(0);
+
+    if is_close {
+        if !(next == b'>' || next.is_ascii_whitespace()) {
+            return None;
+        }
+        let mut cursor = after_name;
+        while cursor < bytes.len() {
+            match bytes[cursor] {
+                b'>' => return Some(cursor + 1),
+                b if b.is_ascii_whitespace() => cursor += 1,
+                _ => return None,
+            }
+        }
+        None
+    } else {
+        if !(next == b'>' || next == b'/' || next.is_ascii_whitespace()) {
+            return None;
+        }
+        parse_opening_tag(s, pos).map(|o| o.tag_end)
+    }
+}
+
+/// ASCII case-insensitive equality between `s[start..start + needle.len()]`
+/// and `needle`. `needle` must be ASCII-lowercase. Returns false if the
+/// slice is too short.
+fn slice_eq_ascii_ci(s: &str, start: usize, needle: &str) -> bool {
+    let bytes = s.as_bytes();
+    let n = needle.as_bytes();
+    if start + n.len() > bytes.len() {
+        return false;
+    }
+    for (i, &nb) in n.iter().enumerate() {
+        if bytes[start + i].to_ascii_lowercase() != nb {
+            return false;
+        }
+    }
+    true
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    // ---------------------------------------------------------------------
+    // Top-level passthrough / scope checks
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn passthrough_when_no_code_element() {
+        let input = "<div>{{foo}}</div>";
+        assert_eq!(escape_code_sample_elements(input), input);
+    }
+
+    #[test]
+    fn preserves_bindings_outside_code() {
+        let input = "<h1>{{a}}</h1><code>{{b}}</code><p>{{c}}</p>";
+        let expected =
+            "<h1>{{a}}</h1><code>&#123;&#123;b&#125;&#125;</code><p>{{c}}</p>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn preserves_directives_outside_code() {
+        // `<f-when>` outside any `<code>` element is left completely
+        // alone so real directives continue to work.
+        let input = "<f-when value=\"{{flag}}\">x</f-when>";
+        assert_eq!(escape_code_sample_elements(input), input);
+    }
+
+    #[test]
+    fn does_not_match_codepoint_tag() {
+        // A tag whose name *starts* with "code" but is something else
+        // must not be mistaken for `<code>` by the outer scanner.
+        let input = "<codepoint>{{x}}</codepoint>";
+        assert_eq!(escape_code_sample_elements(input), input);
+    }
+
+    // ---------------------------------------------------------------------
+    // Brace escape inside `<code>`
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn escapes_braces_inside_code() {
+        let input = "<code>{{greeting}}</code>";
+        let expected = "<code>&#123;&#123;greeting&#125;&#125;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_single_brace_attribute_binding_text_inside_code() {
+        // The single-brace `{...}` attribute-binding syntax must also
+        // be neutralised so `button @click="{handler()}"` renders
+        // literally when written as text inside `<code>`.
+        let input = "<code>button @click=\"{handler()}\" /button</code>";
+        let expected =
+            "<code>button @click=\"&#123;handler()&#125;\" /button</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn code_with_attributes_on_the_code_element() {
+        let input = "<code class=\"hl\" lang=\"html\">{{x}}</code>";
+        let expected =
+            "<code class=\"hl\" lang=\"html\">&#123;&#123;x&#125;&#125;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn self_closing_code_is_left_alone() {
+        // `<code />` has no content to escape; the opening tag is
+        // emitted as-is and a following sibling element is not touched.
+        let input = "<code /><p>{{x}}</p>";
+        let expected = "<code /><p>{{x}}</p>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    // ---------------------------------------------------------------------
+    // Directive-tag angle escape inside `<code>`
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn escapes_literal_f_when_directive_inside_code() {
+        // Authors can write a literal `<f-when>` inside `<code>`; both
+        // the angle brackets and the brace-binding syntax in the
+        // `value` attribute are neutralised.
+        let input = "<code><f-when value=\"{{flag}}\">wrapped</f-when></code>";
+        let expected = "<code>&lt;f-when value=\"&#123;&#123;flag&#125;&#125;\"&gt;wrapped&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_literal_f_repeat_directive_inside_code() {
+        let input =
+            "<code><f-repeat value=\"{{items}}\">i</f-repeat></code>";
+        let expected = "<code>&lt;f-repeat value=\"&#123;&#123;items&#125;&#125;\"&gt;i&lt;/f-repeat&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_self_closing_directive_inside_code() {
+        // The XHTML-style self-close form `<f-when … />` is also
+        // matched by the directive scanner.
+        let input = "<code><f-when value=\"{{flag}}\" /></code>";
+        let expected =
+            "<code>&lt;f-when value=\"&#123;&#123;flag&#125;&#125;\" /&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_uppercase_directive_tags_case_insensitively() {
+        // Browsers normalise HTML tag names to lowercase, so an
+        // unescaped `<F-When>` would become a live `<f-when>` element
+        // after the DOM round-trip and re-activate the directive. The
+        // server-side escape must therefore be case-insensitive.
+        let input = "<code><F-When value=\"{{flag}}\">x</F-When></code>";
+        let expected = "<code>&lt;F-When value=\"&#123;&#123;flag&#125;&#125;\"&gt;x&lt;/F-When&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn pre_escaped_directive_tags_inside_code_are_preserved() {
+        // If the author has already entity-encoded the angle brackets
+        // (carried over from older `&lt;f-when&gt;` authoring), the
+        // pass is a no-op for the angles — we don't re-encode `&` —
+        // and braces are still neutralised.
+        let input = "<code>&lt;f-when value=\"{{flag}}\"&gt;wrapped&lt;/f-when&gt;</code>";
+        let expected =
+            "<code>&lt;f-when value=\"&#123;&#123;flag&#125;&#125;\"&gt;wrapped&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn does_not_match_directive_name_prefix() {
+        // `<f-whenever>` must not be treated as `<f-when>` — only an
+        // exact directive name followed by `>`, `/`, or whitespace
+        // counts. The brace inside is still escaped because that
+        // pass runs everywhere inside `<code>`.
+        let input = "<code><f-whenever value=\"{{x}}\">y</f-whenever></code>";
+        let expected =
+            "<code><f-whenever value=\"&#123;&#123;x&#125;&#125;\">y</f-whenever></code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_directive_with_gt_inside_attribute_value() {
+        // `>` inside a quoted attribute value must be skipped by the
+        // tag-end scanner but *also* rewritten by the angle escape so
+        // the browser doesn't see a stray `>` in the entity-decoded
+        // text content of the surrounding `<code>` element.
+        let input = "<code><f-when value=\"x > 5\">y</f-when></code>";
+        let expected =
+            "<code>&lt;f-when value=\"x &gt; 5\"&gt;y&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn escapes_directive_with_lt_inside_attribute_value() {
+        // A raw `<` inside a quoted attribute value would otherwise be
+        // re-parsed by the browser as the start of a new tag once the
+        // outer entity is decoded; the angle escape rewrites it too.
+        let input = "<code><f-when value=\"a < b\">y</f-when></code>";
+        let expected =
+            "<code>&lt;f-when value=\"a &lt; b\"&gt;y&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    // ---------------------------------------------------------------------
+    // Real HTML elements / custom elements inside `<code>` survive
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn preserves_real_html_elements_inside_code() {
+        // A real `<button>` (or any non-directive HTML element) inside
+        // `<code>` keeps its angle brackets so the browser renders it
+        // as a live DOM element; only brace-binding text in its
+        // attributes is neutralised.
+        let input = "<code><button class=\"demo\">click</button></code>";
+        let expected =
+            "<code><button class=\"demo\">click</button></code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn preserves_custom_elements_inside_code() {
+        // Custom elements (`<my-widget>`) likewise survive — their
+        // angle brackets are not rewritten, but binding-like text in
+        // their attribute values is neutralised so the parser doesn't
+        // wire up a live binding to the rendered element.
+        let input =
+            "<code><my-widget data-x=\"{{value}}\">label</my-widget></code>";
+        let expected =
+            "<code><my-widget data-x=\"&#123;&#123;value&#125;&#125;\">label</my-widget></code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn handles_nested_code_with_real_inner_element() {
+        // The outer `<code>` scope is determined by depth tracking on
+        // the literal `<code>` / `</code>` tokens; the inner `<code>`
+        // is *not* a FAST directive so its angle brackets are kept,
+        // preserving the nested element. Braces in both scopes are
+        // still neutralised.
+        let input = "<code>outer {{x}} <code>inner {{y}}</code> tail</code>";
+        let expected = "<code>outer &#123;&#123;x&#125;&#125; <code>inner &#123;&#123;y&#125;&#125;</code> tail</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn mixed_real_element_and_directive_inside_code() {
+        // The `<button>` survives, the `<f-when>` is neutralised, and
+        // all brace bindings in either subtree are escaped.
+        let input = "<code><button>{{x}}</button>\
+                     <f-when value=\"{{flag}}\">y</f-when></code>";
+        let expected = "<code><button>&#123;&#123;x&#125;&#125;</button>\
+                        &lt;f-when value=\"&#123;&#123;flag&#125;&#125;\"&gt;y&lt;/f-when&gt;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    // ---------------------------------------------------------------------
+    // Round-trip / robustness
+    // ---------------------------------------------------------------------
+
+    #[test]
+    fn preserves_existing_entity_references() {
+        // `&amp;` / `&lt;` etc. inside `<code>` must not be re-encoded
+        // (that would produce double-escaped `&amp;amp;` and break
+        // round-tripping for content the author already escaped).
+        let input = "<code>R&amp;D : &lt;tag&gt; : &#123;raw&#125;</code>";
+        let expected = "<code>R&amp;D : &lt;tag&gt; : &#123;raw&#125;</code>";
+        assert_eq!(escape_code_sample_elements(input), expected);
+    }
+
+    #[test]
+    fn idempotent_for_directive_and_brace_content() {
+        // After one pass the directive tags carry entity-encoded
+        // angles and the braces are entity-encoded; a second pass
+        // finds nothing new to escape.
+        let input =
+            "<code><f-when value=\"{{x}}\">y</f-when></code>";
+        let once = escape_code_sample_elements(input);
+        let twice = escape_code_sample_elements(&once);
+        assert_eq!(once, twice);
+    }
+
+    #[test]
+    fn idempotent_for_real_elements_in_code() {
+        // Real elements inside `<code>` round-trip unchanged on the
+        // second pass — only the braces in their attributes are
+        // escaped on the first pass, and nothing else changes.
+        let input =
+            "<code><button class=\"demo\">click {{x}}</button></code>";
+        let once = escape_code_sample_elements(input);
+        let twice = escape_code_sample_elements(&once);
+        assert_eq!(once, twice);
+    }
+}
diff --git a/crates/microsoft-fast-build/src/lib.rs b/crates/microsoft-fast-build/src/lib.rs
index a6775cb0e69..9a7ddb6a622 100644
--- a/crates/microsoft-fast-build/src/lib.rs
+++ b/crates/microsoft-fast-build/src/lib.rs
@@ -68,6 +68,7 @@ mod node;
 mod renderer;
 mod error;
 mod locator;
+mod code_escape;
 #[cfg(target_arch = "wasm32")]
 mod wasm;
 
diff --git a/crates/microsoft-fast-build/src/locator.rs b/crates/microsoft-fast-build/src/locator.rs
index be5ec4f2ef5..64187827468 100644
--- a/crates/microsoft-fast-build/src/locator.rs
+++ b/crates/microsoft-fast-build/src/locator.rs
@@ -2,18 +2,21 @@ use std::collections::HashMap;
 use std::path::Path;
 use crate::attribute::{find_tag_end, parse_element_attributes};
 use crate::error::RenderError;
+use crate::code_escape::escape_code_sample_elements;
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub(crate) struct FTemplate {
     pub name: Option<String>,
     pub content: String,
     pub shadowroot_attributes: Vec<(String, Option<String>)>,
+    pub host_attributes: Vec<(String, Option<String>)>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 struct TemplateDefinition {
     content: String,
     shadowroot_attributes: Vec<(String, Option<String>)>,
+    host_attributes: Vec<(String, Option<String>)>,
 }
 
 pub struct Locator {
@@ -81,8 +84,9 @@ impl Locator {
                 "expected exactly one entry for element; duplicates rejected above and entries are only created when a template is added",
             );
             templates.insert(element, TemplateDefinition {
-                content: template.content,
+                content: escape_code_sample_elements(&template.content),
                 shadowroot_attributes: template.shadowroot_attributes,
+                host_attributes: template.host_attributes,
             });
         }
 
@@ -92,22 +96,48 @@ impl Locator {
     /// Create a Locator from an explicit map (useful for testing without filesystem).
     ///
     /// This API only carries template content. Shadowroot-prefixed attributes for
-    /// Declarative Shadow DOM are empty for these entries. Use [`Locator::from_patterns`]
-    /// with `<f-template>` metadata, or call [`Locator::add_template_with_shadowroot_attrs`]
-    /// for templates that need shadowroot attributes.
+    /// Declarative Shadow DOM and host attributes are empty for these entries. Use
+    /// [`Locator::from_patterns`] with `<f-template>` metadata, or call
+    /// [`Locator::add_template_with_attrs`] for templates that need shadowroot
+    /// or host attributes.
     pub fn from_templates(templates: HashMap<String, String>) -> Self {
         let templates = templates
             .into_iter()
-            .map(|(name, content)| (name, TemplateDefinition { content, shadowroot_attributes: Vec::new() }))
+            .map(|(name, content)| (name, TemplateDefinition {
+                content: escape_code_sample_elements(&content),
+                shadowroot_attributes: Vec::new(),
+                host_attributes: Vec::new(),
+            }))
             .collect();
         Locator { templates }
     }
 
-    #[cfg_attr(not(target_arch = "wasm32"), allow(dead_code))]
-    pub(crate) fn from_template_definitions(templates: HashMap<String, (String, Vec<(String, Option<String>)>)>) -> Self {
+    /// Create a Locator from explicit template metadata.
+    ///
+    /// Each map value is `(content, shadowroot_attributes, host_attributes)`.
+    /// `shadowroot_attributes` are forwarded to the Declarative Shadow DOM
+    /// `<template>` tag; `host_attributes` are merged onto the rendered host
+    /// element's opening tag (author attributes win on conflicts).
+    pub fn from_template_definitions(
+        templates: HashMap<
+            String,
+            (
+                String,
+                Vec<(String, Option<String>)>,
+                Vec<(String, Option<String>)>,
+            ),
+        >,
+    ) -> Self {
         let templates = templates
             .into_iter()
-            .map(|(name, (content, shadowroot_attributes))| (name, TemplateDefinition { content, shadowroot_attributes }))
+            .map(|(name, (content, shadowroot_attributes, host_attributes))| (
+                name,
+                TemplateDefinition {
+                    content: escape_code_sample_elements(&content),
+                    shadowroot_attributes,
+                    host_attributes,
+                },
+            ))
             .collect();
         Locator { templates }
     }
@@ -115,30 +145,41 @@ impl Locator {
     /// Add a template directly.
     ///
     /// This only stores template content. Shadowroot-prefixed attributes for
-    /// Declarative Shadow DOM are empty for this entry. Use
-    /// [`Locator::add_template_with_shadowroot_attrs`] when the rendered shadow
-    /// `<template>` needs attributes such as `shadowrootmode`.
+    /// Declarative Shadow DOM and host attributes are empty for this entry.
+    /// Use [`Locator::add_template_with_attrs`] when the rendered shadow
+    /// `<template>` needs attributes such as `shadowrootmode`, or when host
+    /// attributes from the source `<f-template>`'s inner `<template>` should
+    /// be merged onto the host element opening tag.
     pub fn add_template(&mut self, element_name: &str, content: &str) {
         self.templates.insert(element_name.to_string(), TemplateDefinition {
-            content: content.to_string(),
+            content: escape_code_sample_elements(content),
             shadowroot_attributes: Vec::new(),
+            host_attributes: Vec::new(),
         });
     }
 
-    /// Add a template directly with shadowroot-prefixed attributes.
+    /// Add a template directly with shadowroot-prefixed attributes and host
+    /// attributes that should be merged onto the rendered host element.
+    ///
+    /// `shadowroot_attrs` are filtered by [`collect_shadowroot_attributes`]:
+    /// only attributes whose names begin with `shadowroot` are retained, names
+    /// are normalized to lowercase, and duplicates are ignored. Use `None` for
+    /// boolean attributes.
     ///
-    /// Only attributes whose names begin with `shadowroot` are retained. Names
-    /// are normalized to lowercase and duplicate names are ignored, matching
-    /// `<f-template>` parsing. Use `None` for boolean attributes.
-    pub fn add_template_with_shadowroot_attrs(
+    /// `host_attrs` are stored verbatim in source order — the renderer is
+    /// responsible for filtering client-only attributes and resolving any
+    /// `{{expr}}` / `?name="{{expr}}"` bindings against the child state.
+    pub fn add_template_with_attrs(
         &mut self,
         element_name: &str,
         content: &str,
-        attrs: &[(String, Option<String>)],
+        shadowroot_attrs: &[(String, Option<String>)],
+        host_attrs: &[(String, Option<String>)],
     ) {
         self.templates.insert(element_name.to_string(), TemplateDefinition {
-            content: content.to_string(),
-            shadowroot_attributes: collect_shadowroot_attributes(attrs),
+            content: escape_code_sample_elements(content),
+            shadowroot_attributes: collect_shadowroot_attributes(shadowroot_attrs),
+            host_attributes: host_attrs.to_vec(),
         });
     }
 
@@ -153,6 +194,13 @@ impl Locator {
             .unwrap_or(&[])
     }
 
+    pub fn get_host_attributes(&self, element_name: &str) -> &[(String, Option<String>)] {
+        self.templates
+            .get(element_name)
+            .map(|template| template.host_attributes.as_slice())
+            .unwrap_or(&[])
+    }
+
     pub fn has_template(&self, element_name: &str) -> bool {
         self.templates.contains_key(element_name)
     }
@@ -194,12 +242,13 @@ pub(crate) fn parse_f_templates(html: &str) -> Vec<FTemplate> {
             None => break,
         };
         let inner_html = &html[inner_start..inner_end];
-        let content = extract_template_content(inner_html);
+        let (content, host_attributes) = extract_template_content(inner_html);
 
         results.push(FTemplate {
             name,
             content,
             shadowroot_attributes,
+            host_attributes,
         });
         search_start = inner_end + end_tag.len();
     }
@@ -220,22 +269,27 @@ fn collect_shadowroot_attributes(attrs: &[(String, Option<String>)]) -> Vec<(Str
     results
 }
 
-/// Extract the inner content of the first `<template>` element found in `html`.
-/// Returns the trimmed content between `<template ...>` and `</template>`.
-fn extract_template_content(html: &str) -> String {
+/// Extract the inner content and the opening-tag attributes of the first
+/// `<template>` element found in `html`. Returns the trimmed inner content
+/// and the attributes parsed from the inner `<template …>` opening tag.
+///
+/// If no `<template>` element is found, returns the trimmed input with an
+/// empty attribute list.
+fn extract_template_content(html: &str) -> (String, Vec<(String, Option<String>)>) {
     let open = match html.find("<template") {
         Some(i) => i,
-        None => return html.trim().to_string(),
+        None => return (html.trim().to_string(), Vec::new()),
     };
-    let tag_end = match html[open..].find('>') {
-        Some(i) => open + i + 1,
-        None => return html.trim().to_string(),
+    let tag_end = match find_tag_end(html, open) {
+        Some(i) => i,
+        None => return (html.trim().to_string(), Vec::new()),
     };
     let close = match html[tag_end..].find("</template>") {
         Some(i) => tag_end + i,
-        None => return html.trim().to_string(),
+        None => return (html.trim().to_string(), Vec::new()),
     };
-    html[tag_end..close].trim().to_string()
+    let attrs = parse_element_attributes(&html[open..tag_end]);
+    (html[tag_end..close].trim().to_string(), attrs)
 }
 
 
@@ -401,6 +455,7 @@ mod tests {
         assert_eq!(results[0].name, Some("my-button".to_string()));
         assert_eq!(results[0].content, "<button>{{label}}</button>");
         assert!(results[0].shadowroot_attributes.is_empty());
+        assert!(results[0].host_attributes.is_empty());
     }
 
     #[test]
@@ -415,8 +470,10 @@ mod tests {
         assert_eq!(results.len(), 2);
         assert_eq!(results[0].name, Some("my-a".to_string()));
         assert_eq!(results[0].content, "<span>A</span>");
+        assert!(results[0].host_attributes.is_empty());
         assert_eq!(results[1].name, Some("my-b".to_string()));
         assert_eq!(results[1].content, "<div>B</div>");
+        assert!(results[1].host_attributes.is_empty());
     }
 
     #[test]
@@ -427,6 +484,7 @@ mod tests {
         let results = parse_f_templates(html);
         assert_eq!(results.len(), 1);
         assert_eq!(results[0].name, None);
+        assert!(results[0].host_attributes.is_empty());
     }
 
     #[test]
@@ -444,10 +502,43 @@ mod tests {
                 ("shadowrootclonable".to_string(), Some("true".to_string())),
             ]
         );
+        assert!(results[0].host_attributes.is_empty());
+    }
+
+    #[test]
+    fn test_parse_f_templates_host_attributes() {
+        let html = r#"<f-template name="my-el">
+    <template tabindex="0" @click="{handle()}" attr="{{val}}"><span>x</span></template>
+</f-template>"#;
+        let results = parse_f_templates(html);
+        assert_eq!(results.len(), 1);
+        assert_eq!(
+            results[0].host_attributes,
+            vec![
+                ("tabindex".to_string(), Some("0".to_string())),
+                ("@click".to_string(), Some("{handle()}".to_string())),
+                ("attr".to_string(), Some("{{val}}".to_string())),
+            ]
+        );
     }
 
     #[test]
-    fn test_add_template_with_shadowroot_attrs_preserves_attrs() {
+    fn test_parse_f_templates_host_attributes_with_quoted_gt() {
+        // A `>` inside a quoted attribute value must not terminate the opening tag.
+        let html = r#"<f-template name="my-el">
+    <template data-x="a>b"><span>x</span></template>
+</f-template>"#;
+        let results = parse_f_templates(html);
+        assert_eq!(results.len(), 1);
+        assert_eq!(results[0].content, "<span>x</span>");
+        assert_eq!(
+            results[0].host_attributes,
+            vec![("data-x".to_string(), Some("a>b".to_string()))]
+        );
+    }
+
+    #[test]
+    fn test_add_template_with_attrs_shadowroot_only() {
         let mut locator = Locator::from_templates(std::collections::HashMap::new());
         let attrs = vec![
             ("shadowrootmode".to_string(), Some("closed".to_string())),
@@ -455,16 +546,55 @@ mod tests {
             ("shadowrootclonable".to_string(), Some("true".to_string())),
         ];
 
-        locator.add_template_with_shadowroot_attrs("my-el", "<span>shadow</span>", &attrs);
+        locator.add_template_with_attrs("my-el", "<span>shadow</span>", &attrs, &[]);
 
         assert_eq!(locator.get_template("my-el"), Some("<span>shadow</span>"));
         assert_eq!(locator.get_shadowroot_attributes("my-el"), attrs.as_slice());
+        assert!(locator.get_host_attributes("my-el").is_empty());
+    }
+
+    #[test]
+    fn test_add_template_with_attrs_shadowroot_and_host() {
+        let mut locator = Locator::from_templates(std::collections::HashMap::new());
+        let shadowroot_attrs = vec![
+            ("shadowrootmode".to_string(), Some("closed".to_string())),
+        ];
+        let host_attrs = vec![
+            ("tabindex".to_string(), Some("0".to_string())),
+            ("?disabled".to_string(), Some("{{isDisabled}}".to_string())),
+        ];
+
+        locator.add_template_with_attrs(
+            "my-el",
+            "<span>x</span>",
+            &shadowroot_attrs,
+            &host_attrs,
+        );
+
+        assert_eq!(locator.get_template("my-el"), Some("<span>x</span>"));
+        assert_eq!(locator.get_shadowroot_attributes("my-el"), shadowroot_attrs.as_slice());
+        assert_eq!(locator.get_host_attributes("my-el"), host_attrs.as_slice());
     }
 
     #[test]
     fn test_extract_template_content_basic() {
         let html = "    <template>\n        <button>click</button>\n    </template>\n";
-        let content = extract_template_content(html);
+        let (content, attrs) = extract_template_content(html);
         assert_eq!(content, "<button>click</button>");
+        assert!(attrs.is_empty());
+    }
+
+    #[test]
+    fn test_extract_template_content_with_attrs() {
+        let html = "<template tabindex=\"0\" ?disabled=\"{{isDisabled}}\"><span>x</span></template>";
+        let (content, attrs) = extract_template_content(html);
+        assert_eq!(content, "<span>x</span>");
+        assert_eq!(
+            attrs,
+            vec![
+                ("tabindex".to_string(), Some("0".to_string())),
+                ("?disabled".to_string(), Some("{{isDisabled}}".to_string())),
+            ]
+        );
     }
 }
diff --git a/crates/microsoft-fast-build/src/renderer.rs b/crates/microsoft-fast-build/src/renderer.rs
index 10e38e1bc6a..0fdc5f94570 100644
--- a/crates/microsoft-fast-build/src/renderer.rs
+++ b/crates/microsoft-fast-build/src/renderer.rs
@@ -3,17 +3,20 @@ use crate::error::RenderError;
 use crate::config::RenderConfig;
 use crate::node::render_node;
 use crate::locator::Locator;
+use crate::code_escape::escape_code_sample_elements;
 
 pub fn render(template: &str, root: &JsonValue, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
-    render_node(template, root, &[], None, None, false, config)
+    let preprocessed = escape_code_sample_elements(template);
+    render_node(&preprocessed, root, &[], None, None, false, config)
 }
 
 pub fn render_with_locator(template: &str, root: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
-    render_node(template, root, &[], Some(locator), None, false, config)
+    let preprocessed = escape_code_sample_elements(template);
+    render_node(&preprocessed, root, &[], Some(locator), None, false, config)
 }
 
 /// Render the top-level **entry HTML** — custom elements found at this level use
@@ -22,5 +25,6 @@ pub fn render_with_locator(template: &str, root: &JsonValue, locator: &Locator,
 pub fn render_entry_with_locator(template: &str, root: &JsonValue, locator: &Locator, config: Option<&RenderConfig>) -> Result<String, RenderError> {
     let default = RenderConfig::default();
     let config = config.unwrap_or(&default);
-    render_node(template, root, &[], Some(locator), None, true, config)
+    let preprocessed = escape_code_sample_elements(template);
+    render_node(&preprocessed, root, &[], Some(locator), None, true, config)
 }
diff --git a/crates/microsoft-fast-build/src/wasm.rs b/crates/microsoft-fast-build/src/wasm.rs
index 07ffafea4b0..661906d4508 100644
--- a/crates/microsoft-fast-build/src/wasm.rs
+++ b/crates/microsoft-fast-build/src/wasm.rs
@@ -76,6 +76,30 @@ pub fn render_entry_with_templates(
     .map_err(|e| JsValue::from_str(&e.to_string()))
 }
 
+/// Apply the FAST code-sample escape to an HTML string.
+///
+/// Walks the input HTML and, for every `<code>` element, escapes:
+///
+/// * curly braces (`{` → `&#123;`, `}` → `&#125;`) in text content and
+///   attribute values — so the FAST template parser does not interpret
+///   `{{ ... }}` / `{ ... }` inside code samples as bindings;
+/// * angle brackets of FAST directive tags (`<f-when>`, `</f-when>`,
+///   `<f-repeat>`, `</f-repeat>`, case-insensitive) — so those directive
+///   tags surface as literal text instead of being activated as real
+///   elements. Angle brackets of any other tag (`<button>`, custom
+///   elements, …) are left untouched so they keep rendering as live DOM.
+///
+/// Non-`<code>` regions of the input are returned verbatim. The function
+/// is idempotent — running it on an already-escaped string is a no-op.
+///
+/// Intended for build-time tooling that needs to inject author-written
+/// HTML containing `<code>` samples into a rendered page without going
+/// through the full `render_*` pipeline.
+#[wasm_bindgen]
+pub fn escape_code_samples(html: &str) -> String {
+    crate::code_escape::escape_code_sample_elements(html)
+}
+
 /// Parse all `<f-template>` elements from an HTML string.
 /// Returns a JSON array of template metadata objects,
 /// one per `<f-template>` element found. `name` is `null` when the element has
@@ -90,16 +114,17 @@ pub fn parse_f_templates(html: &str) -> String {
             None => "null".to_string(),
         };
         parts.push(format!(
-            "{{\"name\":{},\"content\":\"{}\",\"shadowrootAttributes\":{}}}",
+            "{{\"name\":{},\"content\":\"{}\",\"shadowrootAttributes\":{},\"hostAttributes\":{}}}",
             name_json,
             escape_json_str(&template.content),
-            shadowroot_attributes_json(&template.shadowroot_attributes)
+            attribute_pairs_json(&template.shadowroot_attributes),
+            attribute_pairs_json(&template.host_attributes)
         ));
     }
     format!("[{}]", parts.join(","))
 }
 
-fn shadowroot_attributes_json(attrs: &[(String, Option<String>)]) -> String {
+fn attribute_pairs_json(attrs: &[(String, Option<String>)]) -> String {
     let mut parts = Vec::with_capacity(attrs.len());
     for (name, value) in attrs {
         let value_json = match value {
@@ -132,7 +157,17 @@ fn escape_json_str(s: &str) -> String {
 
 fn parse_templates_map(
     templates_json: &str,
-) -> Result<HashMap<String, (String, Vec<(String, Option<String>)>)>, JsValue> {
+) -> Result<
+    HashMap<
+        String,
+        (
+            String,
+            Vec<(String, Option<String>)>,
+            Vec<(String, Option<String>)>,
+        ),
+    >,
+    JsValue,
+> {
     let parsed = json::parse(templates_json).map_err(|e| {
         JsValue::from_str(&format!("Failed to parse templates JSON: {}", e.message))
     })?;
@@ -142,7 +177,7 @@ fn parse_templates_map(
             for (k, v) in obj {
                 match v {
                     json::JsonValue::String(s) => {
-                        map.insert(k, (s, Vec::new()));
+                        map.insert(k, (s, Vec::new(), Vec::new()));
                     }
                     json::JsonValue::Object(template) => {
                         map.insert(k.clone(), parse_template_metadata(&k, &template)?);
@@ -164,7 +199,14 @@ fn parse_templates_map(
 fn parse_template_metadata(
     template_name: &str,
     template: &HashMap<String, json::JsonValue>,
-) -> Result<(String, Vec<(String, Option<String>)>), JsValue> {
+) -> Result<
+    (
+        String,
+        Vec<(String, Option<String>)>,
+        Vec<(String, Option<String>)>,
+    ),
+    JsValue,
+> {
     let content = match template.get("content") {
         Some(json::JsonValue::String(content)) => content.clone(),
         _ => {
@@ -175,8 +217,10 @@ fn parse_template_metadata(
         }
     };
 
-    let attrs = match template.get("shadowrootAttributes") {
-        Some(json::JsonValue::Array(attrs)) => parse_shadowroot_attributes(template_name, attrs)?,
+    let shadowroot_attrs = match template.get("shadowrootAttributes") {
+        Some(json::JsonValue::Array(attrs)) => {
+            parse_attribute_pairs(template_name, "shadowroot", attrs)?
+        }
         Some(json::JsonValue::Null) | None => Vec::new(),
         Some(_) => {
             return Err(JsValue::from_str(&format!(
@@ -186,11 +230,25 @@ fn parse_template_metadata(
         }
     };
 
-    Ok((content, attrs))
+    let host_attrs = match template.get("hostAttributes") {
+        Some(json::JsonValue::Array(attrs)) => {
+            parse_attribute_pairs(template_name, "host", attrs)?
+        }
+        Some(json::JsonValue::Null) | None => Vec::new(),
+        Some(_) => {
+            return Err(JsValue::from_str(&format!(
+                "Template metadata for '{}' must use an array hostAttributes property",
+                template_name
+            )));
+        }
+    };
+
+    Ok((content, shadowroot_attrs, host_attrs))
 }
 
-fn parse_shadowroot_attributes(
+fn parse_attribute_pairs(
     template_name: &str,
+    kind: &str,
     attrs: &[json::JsonValue],
 ) -> Result<Vec<(String, Option<String>)>, JsValue> {
     let mut parsed = Vec::with_capacity(attrs.len());
@@ -199,8 +257,8 @@ fn parse_shadowroot_attributes(
             json::JsonValue::Object(attr) => attr,
             _ => {
                 return Err(JsValue::from_str(&format!(
-                    "Template metadata for '{}' contains a non-object shadowroot attribute",
-                    template_name
+                    "Template metadata for '{}' contains a non-object {} attribute",
+                    template_name, kind
                 )));
             }
         };
@@ -208,8 +266,8 @@ fn parse_shadowroot_attributes(
             Some(json::JsonValue::String(name)) => name.clone(),
             _ => {
                 return Err(JsValue::from_str(&format!(
-                    "Template metadata for '{}' contains a shadowroot attribute without a string name",
-                    template_name
+                    "Template metadata for '{}' contains a {} attribute without a string name",
+                    template_name, kind
                 )));
             }
         };
@@ -218,8 +276,8 @@ fn parse_shadowroot_attributes(
             Some(json::JsonValue::Null) | None => None,
             _ => {
                 return Err(JsValue::from_str(&format!(
-                    "Template metadata for '{}' contains a shadowroot attribute with a non-string value",
-                    template_name
+                    "Template metadata for '{}' contains a {} attribute with a non-string value",
+                    template_name, kind
                 )));
             }
         };
@@ -247,6 +305,44 @@ mod tests {
             .1;
         assert!(attrs.is_empty());
     }
+
+    #[test]
+    fn parse_templates_map_treats_null_host_attributes_as_empty() {
+        let templates = match parse_templates_map(
+            r#"{"test-element":{"content":"<span></span>","hostAttributes":null}}"#,
+        ) {
+            Ok(templates) => templates,
+            Err(_) => panic!("template metadata with null hostAttributes should parse"),
+        };
+
+        let attrs = &templates
+            .get("test-element")
+            .expect("template should be present")
+            .2;
+        assert!(attrs.is_empty());
+    }
+
+    #[test]
+    fn parse_templates_map_reads_host_attributes() {
+        let templates = match parse_templates_map(
+            r#"{"test-element":{"content":"<span></span>","hostAttributes":[{"name":"tabindex","value":"0"},{"name":"disabled","value":null}]}}"#,
+        ) {
+            Ok(templates) => templates,
+            Err(_) => panic!("template metadata with hostAttributes should parse"),
+        };
+
+        let host = &templates
+            .get("test-element")
+            .expect("template should be present")
+            .2;
+        assert_eq!(
+            host,
+            &vec![
+                ("tabindex".to_string(), Some("0".to_string())),
+                ("disabled".to_string(), None),
+            ]
+        );
+    }
 }
 
 /// Build an `Option<RenderConfig>` from the optional strategy string.
diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md
index e6ac7937aa9..a7048edc838 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.36 KB | 22.91 KB | 20.35 KB |
+| CDN Rollup Bundle | 76.44 KB | 22.95 KB | 20.38 KB |
 | FASTElement (@microsoft/fast-element/fast-element.js) | 23.73 KB | 7.36 KB | 6.63 KB |
 | Updates (@microsoft/fast-element/updates.js) | 473 B | 335 B | 288 B |
 | Observable (@microsoft/fast-element/observable.js) | 6.70 KB | 2.50 KB | 2.22 KB |
@@ -19,7 +19,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.48 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
 | enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.19 KB | 11.88 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.45 KB | 16.46 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 61.00 KB | 19.21 KB | 17.15 KB |
 | ArrayObserver (@microsoft/fast-element/array-observer.js) | 12.51 KB | 4.45 KB | 4.01 KB |
 | observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.24 KB | 6.52 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.78 KB | 5.58 KB | 5.04 KB |
diff --git a/packages/fast-element/docs/declarative-design.md b/packages/fast-element/docs/declarative-design.md
index 021e6d30591..5b8c8880af1 100644
--- a/packages/fast-element/docs/declarative-design.md
+++ b/packages/fast-element/docs/declarative-design.md
@@ -522,6 +522,7 @@ interface TemplateResolutionContext {
 | `assignObservables(schema, rootSchema, data, target, rootProperty)` | Wraps objects/arrays in `Proxy` for deep observation. |
 | `deepMerge(target, source)` | Merges source into an existing proxy, preserving proxy identity and triggering observable notifications. |
 | `transformInnerHTML(html)` | Normalises HTML-encoded operator characters (`&gt;`, `&lt;`, etc.) used in `<f-when>` expressions. |
+| `escapeBracesInCodeElements(html)` | Replaces `{` / `}` characters inside every `<code>` element with `&#123;` / `&#125;` so binding-like syntax in code samples renders literally rather than being interpreted as FAST bindings. Client-side half of a two-stage escape — the brace escape mirrors the server-side pass in `microsoft-fast-build` (necessary client-side because `&#123;` / `&#125;` decode back to literal `{` / `}` in the DOM and `.innerHTML` does not re-encode them). The angle-bracket escape for FAST directive tags (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) inside `<code>` runs only on the server because the DOM serializer re-encodes `<` / `>` in text content automatically. Real HTML elements (`<button>`) and custom elements inside `<code>` keep their angle brackets and continue to render as live DOM elements. Modeled on Microsoft WebUI's `webui-press` markdown renderer. |
 
 ### Binding classification
 
diff --git a/packages/fast-element/docs/declarative-html.md b/packages/fast-element/docs/declarative-html.md
index 254561718fe..0c1e51b1bc8 100644
--- a/packages/fast-element/docs/declarative-html.md
+++ b/packages/fast-element/docs/declarative-html.md
@@ -439,6 +439,28 @@ Example:
 {{{html}}}
 ```
 
+### Code samples inside `<code>`
+
+Any text or attribute value inside a `<code>` element has its `{` and `}` characters automatically replaced with the HTML numeric character references `&#123;` and `&#125;` before template parsing. As a result, binding delimiters (`{{...}}`, `{{{...}}}`, `{...}`) inside `<code>` are rendered as literal text rather than being interpreted as FAST bindings — making `<code>` blocks safe for embedding code samples that contain binding-like syntax. No marker attribute is needed.
+
+In addition, the build-time renderer (`@microsoft/fast-build`) entity-escapes the `<` and `>` of every **FAST directive tag** (`<f-when>`, `</f-when>`, `<f-repeat>`, `</f-repeat>`) it finds inside `<code>`, so authors can write the directive literally without manually entity-encoding the angle brackets. Tag-name matching is case-insensitive. Non-directive elements inside `<code>` — real HTML elements such as `<button>` and custom elements such as `<my-widget>` — keep their angle brackets and continue to render as live DOM elements; only brace-binding syntax in their attribute values is neutralised.
+
+The brace escape is applied symmetrically by both the server-side renderer and the client-side `<f-template>` parser, so binding positions stay in sync between SSR and hydration. The directive-tag angle escape only needs to run on the server: the DOM serializer re-encodes `<`/`>` in text content, so the client-side parser never sees a raw `<f-when>` inside `<code>` regardless of what the page source contained. This behaviour mirrors how Microsoft WebUI's `webui-press` markdown renderer transparently escapes the same characters inside code spans and code fences.
+
+Example:
+```html
+<f-template name="docs-page">
+    <template>
+        <h1>{{title}}</h1>
+        <pre><code>span {{greeting}} /span</code></pre>
+        <pre><code><f-when value="{{flag}}">wrapped</f-when></code></pre>
+        <pre><code>Try: <button class="demo">click</button></code></pre>
+    </template>
+</f-template>
+```
+
+The `<h1>` binds to `title`, the first `<code>` displays the literal text `span {{greeting}} /span`, the second displays the literal text `<f-when value="{{flag}}">wrapped</f-when>`, and the third renders a live `<button>` element alongside the surrounding sample text.
+
 ## Writing Components
 
 When writing components with the intention of using the declarative HTML syntax, it is imperative that components are written with styling and rendering of the component to be less reliant on any JavaScript state management. An example of this is relying on `elementInterals` state to style a component.
diff --git a/packages/fast-element/scripts/declarative/build-fixtures.js b/packages/fast-element/scripts/declarative/build-fixtures.js
index 4804c06df3a..db0ae4078f0 100644
--- a/packages/fast-element/scripts/declarative/build-fixtures.js
+++ b/packages/fast-element/scripts/declarative/build-fixtures.js
@@ -31,6 +31,14 @@ for (const fixtureName of fixtures) {
 
     // Step 2: inject <f-template> declarations from templates.html before <script>
     const fTemplates = readFileSync(templatesFile, "utf8").trim();
+    // Apply the same `<code>`-sample escape the entry HTML goes through, so
+    // author-written code samples inside `<f-template>` (literal `{{...}}`,
+    // `<f-when>`, `<f-repeat>`) survive into the rendered page as text
+    // instead of being interpreted by the client-side template parser.
+    const wasm = require(
+        require.resolve("@microsoft/fast-build/wasm/microsoft_fast_build.js"),
+    );
+    const escapedFTemplates = wasm.escape_code_samples(fTemplates);
     const rawHtml = readFileSync(outputFile, "utf8");
 
     if (!rawHtml.includes('<script type="module"')) {
@@ -41,7 +49,7 @@ for (const fixtureName of fixtures) {
 
     const html = rawHtml.replace(
         /(\s*)<script type="module"/,
-        `\n${fTemplates}\n$1<script type="module"`,
+        `\n${escapedFTemplates}\n$1<script type="module"`,
     );
 
     writeFileSync(outputFile, html);
diff --git a/packages/fast-element/src/declarative/template.ts b/packages/fast-element/src/declarative/template.ts
index ea0abbd426c..80732505f3f 100644
--- a/packages/fast-element/src/declarative/template.ts
+++ b/packages/fast-element/src/declarative/template.ts
@@ -11,7 +11,7 @@ import { Message } from "./interfaces.js";
 import { ensureDeclarativeRuntime } from "./runtime.js";
 import { declarativeTemplateBridge, type TemplatePublisher } from "./template-bridge.js";
 import { TemplateParser } from "./template-parser.js";
-import { transformInnerHTML } from "./utilities.js";
+import { escapeBracesInCodeElements, transformInnerHTML } from "./utilities.js";
 
 const templateElementName = "f-template";
 
@@ -202,7 +202,7 @@ class FTemplateElement extends HTMLElement implements TemplatePublisher {
 
         const schema = definition.schema ?? new Schema(name);
         definition.schema = schema;
-        const innerHTML = transformInnerHTML(this.innerHTML);
+        const innerHTML = transformInnerHTML(escapeBracesInCodeElements(this.innerHTML));
         const parser = new TemplateParser();
         const { strings, values } = parser.parse(innerHTML, schema);
 
diff --git a/packages/fast-element/src/declarative/utilities.ts b/packages/fast-element/src/declarative/utilities.ts
index 3bdb029f76b..bb6754575c4 100644
--- a/packages/fast-element/src/declarative/utilities.ts
+++ b/packages/fast-element/src/declarative/utilities.ts
@@ -1212,6 +1212,273 @@ export function transformInnerHTML(innerHTML: string, index = 0): string {
     return transformedInnerHTML;
 }
 
+/**
+ * Tag name of the HTML element whose contents are auto-escaped to render
+ * code samples literally. Inside this element FAST binding delimiters
+ * (`{{...}}`, `{{{...}}}`, `{...}`) are neutralised by replacing each
+ * `{` / `}` with the HTML numeric character reference `&#123;` /
+ * `&#125;` so the literal text is rendered instead of a binding.
+ *
+ * The escape behaviour is split between the server-side renderer
+ * (`escape_code_sample_elements` in `microsoft-fast-build`) and the
+ * client-side `<f-template>` parser (`escapeBracesInCodeElements`
+ * below):
+ *
+ *  - Curly-brace escape runs in **both** server and client because
+ *    `&#123;` / `&#125;` are decoded to literal `{` / `}` in the DOM
+ *    and the `.innerHTML` serializer does not re-encode them — so the
+ *    server-side escape would otherwise be undone on the client.
+ *  - Angle brackets of FAST directive tags (`<f-when>`, `</f-when>`,
+ *    `<f-repeat>`, `</f-repeat>`, case-insensitive) inside this element
+ *    are escaped on the **server only**. The DOM serializer
+ *    re-encodes `<` / `>` in text content automatically, so the client
+ *    never sees raw directive tags inside `<code>` regardless of what
+ *    the page source contained.
+ *  - Real HTML elements (`<button>`) and custom elements (`<my-widget>`)
+ *    inside this element keep their angle brackets and continue to
+ *    render as live DOM elements; only the brace-binding syntax inside
+ *    their text and attribute values is neutralised.
+ * @public
+ */
+export const codeElementName = "code";
+
+const CODE_ESCAPE_VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+
+interface OpeningTagMatch {
+    tagName: string;
+    tagStart: number;
+    tagEnd: number;
+    contentStart: number;
+    isSelfClosing: boolean;
+}
+
+/**
+ * Parse an opening tag at `pos` (which points at `<`). Returns the parsed tag
+ * descriptor if `<` introduces an element opening tag, otherwise `null`
+ * (e.g. for `</tag>`, `<!--`, `<!doctype`, `<?...`, or end-of-input).
+ *
+ * The parser is tolerant of attribute values containing `>` only when they
+ * are quoted; quoted attribute values are correctly handled so that a `>`
+ * inside quotes does not terminate the tag.
+ */
+function parseOpeningTagForCodeEscape(html: string, pos: number): OpeningTagMatch | null {
+    if (html.charAt(pos) !== "<") return null;
+    const next = html.charAt(pos + 1);
+    if (next === "/" || next === "!" || next === "?" || next === "") return null;
+    if (!/[A-Za-z]/.test(next)) return null;
+
+    let nameEnd = pos + 1;
+    while (nameEnd < html.length && /[A-Za-z0-9-]/.test(html.charAt(nameEnd))) {
+        nameEnd++;
+    }
+    const tagName = html.slice(pos + 1, nameEnd).toLowerCase();
+    if (tagName === "") return null;
+
+    let cursor = nameEnd;
+
+    while (cursor < html.length) {
+        while (cursor < html.length && /\s/.test(html.charAt(cursor))) cursor++;
+        const ch = html.charAt(cursor);
+        if (ch === ">" || ch === "" || (ch === "/" && html.charAt(cursor + 1) === ">")) {
+            break;
+        }
+        while (
+            cursor < html.length &&
+            !/[\s=>/]/.test(html.charAt(cursor)) &&
+            html.charAt(cursor) !== ""
+        ) {
+            cursor++;
+        }
+        let attrTerminator = cursor;
+        while (attrTerminator < html.length && /\s/.test(html.charAt(attrTerminator))) {
+            attrTerminator++;
+        }
+        if (html.charAt(attrTerminator) === "=") {
+            cursor = attrTerminator + 1;
+            while (cursor < html.length && /\s/.test(html.charAt(cursor))) cursor++;
+            const quote = html.charAt(cursor);
+            if (quote === '"' || quote === "'") {
+                const end = html.indexOf(quote, cursor + 1);
+                cursor = end === -1 ? html.length : end + 1;
+            } else {
+                while (cursor < html.length && !/[\s>]/.test(html.charAt(cursor))) {
+                    cursor++;
+                }
+            }
+        }
+    }
+
+    let isSelfClosing = false;
+    if (html.charAt(cursor) === "/" && html.charAt(cursor + 1) === ">") {
+        isSelfClosing = true;
+        cursor += 2;
+    } else if (html.charAt(cursor) === ">") {
+        cursor += 1;
+    } else {
+        return null;
+    }
+
+    return {
+        tagName,
+        tagStart: pos,
+        tagEnd: cursor,
+        contentStart: cursor,
+        isSelfClosing: isSelfClosing || CODE_ESCAPE_VOID_ELEMENTS.has(tagName),
+    };
+}
+
+/**
+ * Find the position of the matching close tag for an element opened at
+ * `contentStart` with name `tagName`. Returns the index of the `<` of the
+ * matching `</tagName>` close tag, or `html.length` if no matching tag is
+ * found. Nested same-name elements are tracked via a depth counter.
+ */
+function findMatchingCloseTagForCodeEscape(
+    html: string,
+    contentStart: number,
+    tagName: string,
+): number {
+    let depth = 1;
+    let pos = contentStart;
+    const closeNeedle = `</${tagName}`;
+
+    while (pos < html.length) {
+        const lt = html.indexOf("<", pos);
+        if (lt === -1) return html.length;
+
+        const lowerSlice = html.slice(lt, lt + closeNeedle.length).toLowerCase();
+        if (lowerSlice === closeNeedle) {
+            const charAfter = html.charAt(lt + closeNeedle.length);
+            if (charAfter === ">" || /\s/.test(charAfter)) {
+                depth--;
+                if (depth === 0) return lt;
+                const gt = html.indexOf(">", lt);
+                pos = gt === -1 ? html.length : gt + 1;
+                continue;
+            }
+        }
+
+        if (html.startsWith("<!--", lt)) {
+            const end = html.indexOf("-->", lt + 4);
+            pos = end === -1 ? html.length : end + 3;
+            continue;
+        }
+        if (html.charAt(lt + 1) === "!" || html.charAt(lt + 1) === "?") {
+            const end = html.indexOf(">", lt);
+            pos = end === -1 ? html.length : end + 1;
+            continue;
+        }
+        if (html.charAt(lt + 1) === "/") {
+            const end = html.indexOf(">", lt);
+            pos = end === -1 ? html.length : end + 1;
+            continue;
+        }
+
+        const opening = parseOpeningTagForCodeEscape(html, lt);
+        if (opening === null) {
+            pos = lt + 1;
+            continue;
+        }
+        if (opening.tagName === tagName && !opening.isSelfClosing) {
+            depth++;
+        }
+        pos = opening.tagEnd;
+    }
+
+    return html.length;
+}
+
+function escapeBracesInCodeContent(content: string): string {
+    return content.replace(/[{}]/g, c => (c === "{" ? "&#123;" : "&#125;"));
+}
+
+/**
+ * Preprocess an HTML string by escaping FAST brace characters inside every
+ * `<code>` element. Mirrors part of the brace/angle-bracket escaping
+ * behaviour of Microsoft WebUI's `webui-press` markdown renderer so that
+ * example template snippets inside `<code>` render literally instead of
+ * being interpreted as bindings.
+ *
+ * Nested `<code>` elements are handled via depth tracking. The pass is
+ * idempotent because `{` / `}` inside an already-processed `<code>` have
+ * been replaced with entities, so a second pass finds nothing to escape.
+ *
+ * This is the client-side half of a two-stage escape — see the JSDoc on
+ * {@link codeElementName} for why only braces are handled here and
+ * `<` / `>` are exclusively handled on the server.
+ * @public
+ */
+export function escapeBracesInCodeElements(innerHTML: string): string {
+    if (innerHTML.indexOf("<code") === -1) {
+        return innerHTML;
+    }
+
+    let pos = 0;
+    let result = "";
+
+    while (pos < innerHTML.length) {
+        const lt = innerHTML.indexOf("<", pos);
+        if (lt === -1) {
+            result += innerHTML.slice(pos);
+            break;
+        }
+
+        if (innerHTML.startsWith("<!--", lt)) {
+            const end = innerHTML.indexOf("-->", lt + 4);
+            const tail = end === -1 ? innerHTML.length : end + 3;
+            result += innerHTML.slice(pos, tail);
+            pos = tail;
+            continue;
+        }
+
+        const opening = parseOpeningTagForCodeEscape(innerHTML, lt);
+        if (opening === null) {
+            result += innerHTML.slice(pos, lt + 1);
+            pos = lt + 1;
+            continue;
+        }
+
+        if (opening.tagName !== codeElementName) {
+            result += innerHTML.slice(pos, opening.tagEnd);
+            pos = opening.tagEnd;
+            continue;
+        }
+
+        result += innerHTML.slice(pos, opening.tagEnd);
+
+        if (opening.isSelfClosing) {
+            pos = opening.tagEnd;
+            continue;
+        }
+
+        const closeStart = findMatchingCloseTagForCodeEscape(
+            innerHTML,
+            opening.contentStart,
+            codeElementName,
+        );
+        const innerContent = innerHTML.slice(opening.contentStart, closeStart);
+        result += escapeBracesInCodeContent(innerContent);
+        pos = closeStart;
+    }
+
+    return result;
+}
+
 /**
  * Resolves boolean logic
  * used for f-when and boolean attributes
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/code-sample.spec.ts b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/code-sample.spec.ts
new file mode 100644
index 00000000000..f05754be972
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/code-sample.spec.ts
@@ -0,0 +1,101 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("code sample auto-escape", () => {
+    test.beforeEach(async ({ page }) => {
+        const hydrationCompleted = page.waitForFunction(
+            () => (window as any).hydrationCompleted === true,
+        );
+        await page.goto("/fixtures/scenarios/code-sample/");
+        await hydrationCompleted;
+    });
+
+    test("bindings outside <code> still resolve", async ({ page }) => {
+        const boundHeading = page.locator("code-display #bound");
+        await expect(boundHeading).toHaveText("Hello");
+
+        const afterParagraph = page.locator("code-display #after");
+        await expect(afterParagraph).toHaveText("Hello world");
+    });
+
+    test("double-brace text inside <code> is preserved literally", async ({ page }) => {
+        const codeBlock = page.locator("code-display #sample code");
+        await expect(codeBlock).toHaveText("span {{greeting}} /span");
+    });
+
+    test("literal <f-when> tag inside <code> is preserved as text", async ({ page }) => {
+        const codeBlock = page.locator("code-display #sample-directive code");
+        await expect(codeBlock).toHaveText('<f-when value="{{flag}}">wrapped</f-when>');
+
+        // The directive must not have been activated as a real element.
+        const directive = codeBlock.locator("f-when");
+        await expect(directive).toHaveCount(0);
+    });
+
+    test("uppercase <F-When> tag inside <code> is also escaped", async ({ page }) => {
+        // Browsers normalise tag names to lowercase, so an unescaped
+        // `<F-When>` would otherwise become a live `<f-when>` element
+        // after DOM round-trip and re-activate the directive.
+        const codeBlock = page.locator("code-display #sample-directive-uppercase code");
+        await expect(codeBlock).toHaveText('<F-When value="{{flag}}">cased</F-When>');
+        const directive = codeBlock.locator("f-when");
+        await expect(directive).toHaveCount(0);
+    });
+
+    test("literal <f-repeat> tag inside <code> is preserved as text", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-directive-repeat code");
+        await expect(codeBlock).toHaveText('<f-repeat value="{{items}}">i</f-repeat>');
+        const directive = codeBlock.locator("f-repeat");
+        await expect(directive).toHaveCount(0);
+    });
+
+    test("single-brace attribute-binding text inside <code> is preserved literally", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-client code");
+        await expect(codeBlock).toHaveText('button @click="{handler()}" /button');
+    });
+
+    test("real <button> element inside <code> renders as a live DOM element", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-real-button code");
+        // Surrounding text plus the button's text are both visible.
+        await expect(codeBlock).toHaveText("Try: {{greeting}}");
+
+        // The button is a real child element — not text — and its
+        // binding-like attribute is preserved as literal characters
+        // rather than being wired up as a FAST binding.
+        const button = codeBlock.locator("button.demo-btn");
+        await expect(button).toHaveCount(1);
+        await expect(button).toHaveText("{{greeting}}");
+        await expect(button).toHaveAttribute("data-x", "{{greeting}}");
+    });
+
+    test("real custom element inside <code> renders as a live DOM element", async ({
+        page,
+    }) => {
+        const codeBlock = page.locator("code-display #sample-custom-element code");
+        await expect(codeBlock).toHaveText("Use: label");
+
+        const widget = codeBlock.locator("my-demo-widget");
+        await expect(widget).toHaveCount(1);
+        await expect(widget).toHaveText("label");
+        await expect(widget).toHaveAttribute("data-x", "{{greeting}}");
+    });
+
+    test("no hydration errors occur with literal binding-like text", async ({ page }) => {
+        const errors: string[] = await page.evaluate(
+            () => (window as any).__hydrationErrors || [],
+        );
+        const hydrationErrors = errors.filter(
+            (msg: string) =>
+                msg.includes("Hydration") ||
+                msg.includes("hydration") ||
+                msg.includes("Binding") ||
+                msg.includes("binding"),
+        );
+        expect(hydrationErrors).toHaveLength(0);
+    });
+});
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/entry.html b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/entry.html
new file mode 100644
index 00000000000..ae411a9d5f9
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/entry.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <code-display greeting="{{greeting}}"></code-display>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/fast-build.config.json b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/fast-build.config.json
new file mode 100644
index 00000000000..c291972cdad
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/fast-build.config.json
@@ -0,0 +1,6 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html"
+}
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/index.html b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/index.html
new file mode 100644
index 00000000000..822eee87317
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <code-display greeting="Hello"><template shadowrootmode="open" shadowroot="open"><h1 id="bound"><!--fe:b-->Hello<!--fe:/b--></h1>
+        <pre id="sample"><code>span &#123;&#123;greeting&#125;&#125; /span</code></pre>
+        <pre id="sample-directive"><code>&lt;f-when value="&#123;&#123;flag&#125;&#125;"&gt;wrapped&lt;/f-when&gt;</code></pre>
+        <pre id="sample-directive-uppercase"><code>&lt;F-When value="&#123;&#123;flag&#125;&#125;"&gt;cased&lt;/F-When&gt;</code></pre>
+        <pre id="sample-directive-repeat"><code>&lt;f-repeat value="&#123;&#123;items&#125;&#125;"&gt;i&lt;/f-repeat&gt;</code></pre>
+        <pre id="sample-client"><code>button @click="&#123;handler()&#125;" /button</code></pre>
+        <pre id="sample-real-button"><code>Try: <button class="demo-btn" data-x="&#123;&#123;greeting&#125;&#125;">&#123;&#123;greeting&#125;&#125;</button></code></pre>
+        <pre id="sample-custom-element"><code>Use: <my-demo-widget data-x="&#123;&#123;greeting&#125;&#125;">label</my-demo-widget></code></pre>
+        <p id="after"><!--fe:b-->Hello<!--fe:/b--> world</p></template></code-display>
+<f-template name="code-display">
+    <template>
+        <h1 id="bound">{{greeting}}</h1>
+        <pre id="sample"><code>span &#123;&#123;greeting&#125;&#125; /span</code></pre>
+        <pre id="sample-directive"><code>&lt;f-when value="&#123;&#123;flag&#125;&#125;"&gt;wrapped&lt;/f-when&gt;</code></pre>
+        <pre id="sample-directive-uppercase"><code>&lt;F-When value="&#123;&#123;flag&#125;&#125;"&gt;cased&lt;/F-When&gt;</code></pre>
+        <pre id="sample-directive-repeat"><code>&lt;f-repeat value="&#123;&#123;items&#125;&#125;"&gt;i&lt;/f-repeat&gt;</code></pre>
+        <pre id="sample-client"><code>button @click="&#123;handler()&#125;" /button</code></pre>
+        <pre id="sample-real-button"><code>Try: <button class="demo-btn" data-x="&#123;&#123;greeting&#125;&#125;">&#123;&#123;greeting&#125;&#125;</button></code></pre>
+        <pre id="sample-custom-element"><code>Use: <my-demo-widget data-x="&#123;&#123;greeting&#125;&#125;">label</my-demo-widget></code></pre>
+        <p id="after">{{greeting}} world</p>
+    </template>
+</f-template>
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/main.ts b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/main.ts
new file mode 100644
index 00000000000..b703d4c28f3
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/main.ts
@@ -0,0 +1,28 @@
+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 } from "@microsoft/fast-element/hydration.js";
+
+class CodeDisplay extends FASTElement {
+    @attr
+    greeting: string = "Hello";
+}
+CodeDisplay.define({
+    name: "code-display",
+    template: declarativeTemplate(),
+});
+
+(window as any).__hydrationErrors = [];
+const originalConsoleError = console.error;
+console.error = (...args: any[]) => {
+    (window as any).__hydrationErrors.push(
+        args.map(a => (typeof a === "string" ? a : String(a))).join(" "),
+    );
+    originalConsoleError.apply(console, args);
+};
+
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/state.json b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/state.json
new file mode 100644
index 00000000000..a95135e5d40
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/state.json
@@ -0,0 +1,3 @@
+{
+    "greeting": "Hello"
+}
diff --git a/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/templates.html b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/templates.html
new file mode 100644
index 00000000000..57f949a1bcf
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/scenarios/code-sample/templates.html
@@ -0,0 +1,13 @@
+<f-template name="code-display">
+    <template>
+        <h1 id="bound">{{greeting}}</h1>
+        <pre id="sample"><code>span {{greeting}} /span</code></pre>
+        <pre id="sample-directive"><code><f-when value="{{flag}}">wrapped</f-when></code></pre>
+        <pre id="sample-directive-uppercase"><code><F-When value="{{flag}}">cased</F-When></code></pre>
+        <pre id="sample-directive-repeat"><code><f-repeat value="{{items}}">i</f-repeat></code></pre>
+        <pre id="sample-client"><code>button @click="{handler()}" /button</code></pre>
+        <pre id="sample-real-button"><code>Try: <button class="demo-btn" data-x="{{greeting}}">{{greeting}}</button></code></pre>
+        <pre id="sample-custom-element"><code>Use: <my-demo-widget data-x="{{greeting}}">label</my-demo-widget></code></pre>
+        <p id="after">{{greeting}} world</p>
+    </template>
+</f-template>