diff --git a/DESIGN.md b/DESIGN.md
index 6c616db6..7e124afd 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -1341,7 +1341,12 @@ WebUI Framework hydration assumes the SSR DOM, hydration markers, and compiled m
 `@microsoft/webui-framework` consumes the metadata object above plus the SSR markers emitted by `WebUIHydrationPlugin`. This follows an Islands Architecture approach: the server delivers fully-rendered HTML, and only interactive Web Components hydrate on the client — leaving static content untouched.
 
 - SSR hydration uses one DOM walk to discover `<!--wr-->`, `<!--wi-->`, and `<!--wc-->` comment markers, wire the relevant bindings using compiled metadata path indices, then remove SSR-only markers.
-- Client-created DOM never reparses template syntax; it clones marker-free `h` and resolves `tx`, `ag`, `cl`, `rl`, and event target paths directly.
+- Client-created DOM never reparses template syntax; it clones marker-free `h`,
+  upgrades the detached custom-element subtree, resolves `tx`, `ag`, `cl`, `rl`,
+  and event target paths directly, then applies the first binding pass before
+  appending nodes to the connected DOM. Child components therefore observe
+  initial parent `:` property bindings in `connectedCallback`, while later parent
+  updates remain live.
 - Events are resolved from compiled `e[]` metadata entries using path indices. The runtime installs listeners on target elements and resolves handler arguments against the scope captured when that block was rendered. Root events from `re[]` attach directly to the host element.
 - The full package entrypoint supports repeat metadata (`r[]` / `rl[]`). The additive `@microsoft/webui-framework/element-no-repeat` entrypoint preserves the same public `WebUIElement` API but must reject compiled templates that contain repeat metadata.
 
diff --git a/docs/ai.md b/docs/ai.md
index eb345717..18f3bb7f 100644
--- a/docs/ai.md
+++ b/docs/ai.md
@@ -182,6 +182,12 @@ Supported operators: `==`, `!=`, `>`, `<`, `>=`, `<=`, `&&`, `||`, `!`
 <my-widget :config="{{settings}}"></my-widget>
 ```
 
+Property bindings use `:` to write directly to DOM properties. For
+client-created component trees, initial property bindings are applied before a
+child component's `connectedCallback` runs. Children can read parent-provided
+values during setup, initialize their own fallback when a value is missing, and
+still receive later parent updates through the live binding.
+
 ### Events (client-side only)
 
 ```html
diff --git a/docs/guide/concepts/interactivity.md b/docs/guide/concepts/interactivity.md
index 6ff084e5..f4263292 100644
--- a/docs/guide/concepts/interactivity.md
+++ b/docs/guide/concepts/interactivity.md
@@ -230,6 +230,16 @@ Toggle HTML attributes with the `?` prefix:
 <details ?open="{{isExpanded}}">...</details>
 ```
 
+### Property Bindings
+
+Use the `:` prefix to pass rich values directly to child DOM properties:
+
+```html
+<profile-card :config="{{settings}}"></profile-card>
+```
+
+For client-created component trees, WebUI applies initial property bindings before child `connectedCallback` methods run. This lets a child read a parent-provided property during setup. If the parent has not provided a value, the child can initialize a fallback in `connectedCallback`; later parent updates still flow through the live binding.
+
 ### List Rendering
 
 Iterate over arrays with `<for>`:
diff --git a/packages/webui-framework/README.md b/packages/webui-framework/README.md
index 2cb17175..c9bc4d42 100644
--- a/packages/webui-framework/README.md
+++ b/packages/webui-framework/README.md
@@ -95,6 +95,16 @@ cargo run -p microsoft-webui-cli -- build ./src --out ./dist --plugin=webui
 
 The compiler/plugin generates the template metadata consumed by the runtime. In normal app code, you should not need to hand-author `window.__webui.templates`.
 
+### Property binding lifecycle
+
+Property bindings use the `:` prefix to pass values directly to child DOM properties:
+
+```html
+<profile-card :config="{{settings}}"></profile-card>
+```
+
+For client-created component trees, the runtime upgrades the cloned child elements while they are still detached, wires bindings, and applies the first binding pass before appending them to the connected DOM. A child can read an initial parent-provided property in `connectedCallback`. If the parent value is not set, the child may initialize its own fallback there, and later parent updates still flow through the live binding.
+
 ### DOM strategy (`--dom`)
 
 The `--dom` flag controls how the server renders component content:
diff --git a/packages/webui-framework/RENDERING.md b/packages/webui-framework/RENDERING.md
index 49ee700f..5dbdb9d2 100644
--- a/packages/webui-framework/RENDERING.md
+++ b/packages/webui-framework/RENDERING.md
@@ -39,7 +39,7 @@ Compile metadata        Inject SSR markers         existing DOM,
 1. **Server renders HTML.** The handler walks compiled template metadata and application state and emits Declarative Shadow DOM (or light DOM) with five comment markers around structural blocks, plus a `<script>` tag carrying `window.__webui.state` and the per-component template metadata.
 2. **Browser parses HTML.** The parser creates shadow roots inline. The user sees a fully painted page before any framework code runs.
 3. **JavaScript loads.** The component class registers via `customElements.define`. The browser upgrades pre-existing tags and fires `connectedCallback`.
-4. **`$mount` decides client-or-SSR.** If a shadow root exists or the element already has children, the framework treats the DOM as SSR. Otherwise it parses the static template HTML (`meta.h`) and clones it into the element.
+4. **`$mount` decides client-or-SSR.** If a shadow root exists or the element already has children, the framework treats the DOM as SSR. Otherwise it parses the static template HTML (`meta.h`) into a detached staging root, upgrades custom elements, wires bindings, applies the first binding pass, and only then appends the nodes. Child `connectedCallback` methods see initial parent `:` property bindings.
 5. **`$applySSRState` seeds observables.** Backing fields (`_count`, `_title`, ...) are written directly from `window.__webui.state` so reactive bindings observe values that match the painted DOM.
 6. **`$hydrate` walks the DOM once.** Text, attribute, conditional, repeat, and event bindings are resolved by a single in-order pass that uses path indices plus marker-aware ordinal traversal.
 7. **Stale markers are removed.** Item markers (`<!--wi-->`) and closing markers (`<!--/wc-->`, `<!--/wr-->`) are deleted; start markers (`<!--wc-->`, `<!--wr-->`) stay as anchors for runtime updates.
@@ -151,7 +151,7 @@ The compiler emits one `TemplateMeta` per component, delivered as a JS IIFE insi
 The same metadata serves both paths:
 
 - **SSR hydration** reads paths to compute ordinals, which are then translated against the live SSR DOM.
-- **Client-created creation** clones `h` and walks paths directly, since the cloned DOM matches `h` exactly.
+- **Client-created creation** clones `h` into a detached staging root, upgrades custom elements, walks paths directly, and applies initial bindings before the staged nodes are appended to the connected DOM.
 
 ### Condition AST
 
diff --git a/packages/webui-framework/src/element.ts b/packages/webui-framework/src/element.ts
index 49ccbeb5..1ce52721 100644
--- a/packages/webui-framework/src/element.ts
+++ b/packages/webui-framework/src/element.ts
@@ -216,6 +216,7 @@ export class WebUIElement extends HTMLElement {
 
     let root: Node;
     let isSSR: boolean;
+    let clientRoot: HTMLElement | null = null;
 
     if (hasShadow) {
       // Shadow DOM SSR — declarative shadow root already has content
@@ -233,13 +234,9 @@ export class WebUIElement extends HTMLElement {
       // Existing children are slot content — they stay in light DOM
       // and project through the template's <slot>.
       root = this.attachShadow({ mode: 'open' });
-      const fragment = this.$parseTemplate(meta);
-      root.appendChild(fragment);
       isSSR = false;
     } else {
       // Light DOM client-created — populate from template (no shadow = no link issue)
-      const fragment = this.$parseTemplate(meta);
-      this.appendChild(fragment);
       root = this;
       isSSR = false;
     }
@@ -254,7 +251,8 @@ export class WebUIElement extends HTMLElement {
       this.$root = this.$hydrate(root, meta, getTemplateDom(meta));
 
     } else {
-      this.$root = this.$wire(root, meta);
+      clientRoot = this.$createStagingRoot(meta);
+      this.$root = this.$wire(clientRoot, meta);
     }
 
     this.$meta = meta;
@@ -266,8 +264,13 @@ export class WebUIElement extends HTMLElement {
     // into the freshly-wired template DOM. Call $updateInstance directly
     // to avoid the $update() path-index build — it will be lazy-built
     // on the first reactive change instead.
-    if (!isSSR) {
+    if (!isSSR && clientRoot) {
       this.$updateInstance(this.$root);
+      if (this.$root.repeats.length !== 0 || this.$root.conds.length !== 0) {
+        this.$root.nodes = childNodesArray(clientRoot);
+        this.$releaseStagingRepeatContainers(this.$root, clientRoot);
+      }
+      this.$appendStagedChildren(root, clientRoot);
     }
 
     hydrationEnd();
@@ -531,6 +534,49 @@ export class WebUIElement extends HTMLElement {
     return tpl.content.cloneNode(true) as DocumentFragment;
   }
 
+  private $createStagingRoot(meta: TemplateBlockMeta): HTMLElement {
+    const wrapper = document.createElement('div');
+    const fragment = this.$parseTemplate(meta);
+    wrapper.appendChild(fragment);
+    customElements.upgrade(wrapper);
+    return wrapper;
+  }
+
+  private $appendStagedChildren(root: Node, stagingRoot: Node): void {
+    const first = stagingRoot.firstChild;
+    if (!first) return;
+    if (!first.nextSibling) {
+      root.appendChild(first);
+      return;
+    }
+    const fragment = document.createDocumentFragment();
+    while (stagingRoot.firstChild) {
+      fragment.appendChild(stagingRoot.firstChild);
+    }
+    root.appendChild(fragment);
+  }
+
+  private $releaseStagingRepeatContainers(instance: TemplateInstance | null, stagingRoot: Node | null): void {
+    if (!instance || !stagingRoot) return;
+    if (instance.repeats.length === 0 && instance.conds.length === 0) return;
+    const stack: TemplateInstance[] = [instance];
+    while (stack.length > 0) {
+      const current = stack.pop();
+      if (!current) continue;
+      for (let i = 0; i < current.repeats.length; i++) {
+        const repeat = current.repeats[i];
+        if (repeat.container === stagingRoot) repeat.container = null;
+        for (let j = 0; j < repeat.instances.length; j++) {
+          stack.push(repeat.instances[j].instance);
+        }
+      }
+      for (let i = 0; i < current.conds.length; i++) {
+        const child = current.conds[i].instance;
+        if (child) stack.push(child);
+      }
+    }
+  }
+
   // ═══════════════════════════════════════════════════════════════
   //  Client-created wiring — exact childNode index resolution
   // ═══════════════════════════════════════════════════════════════
@@ -1399,8 +1445,9 @@ export class WebUIElement extends HTMLElement {
           for (const n of c.instance.nodes) frag.appendChild(n);
           c.anchor.parentNode?.insertBefore(frag, c.anchor.nextSibling);
         }
+      } else {
+        this.$updateInstance(c.instance);
       }
-      if (c.instance) this.$updateInstance(c.instance);
     } else if (c.instance) {
       this.$removeInstance(c.instance);
       c.instance = null;
@@ -1445,11 +1492,14 @@ export class WebUIElement extends HTMLElement {
   $createBlockInstance(blockIndex: number, scope?: ScopeFrame): TemplateInstance | null {
     const bm = this.$block(blockIndex);
     if (!bm) return null;
-    const frag = this.$parseTemplate(bm);
-    const wrapper = document.createElement('div');
-    wrapper.appendChild(frag);
+    const wrapper = this.$createStagingRoot(bm);
     const inst = this.$wire(wrapper, bm, scope);
     inst.nodes = childNodesArray(wrapper);
+    this.$updateInstance(inst);
+    if (inst.repeats.length !== 0 || inst.conds.length !== 0) {
+      inst.nodes = childNodesArray(wrapper);
+      this.$releaseStagingRepeatContainers(inst, wrapper);
+    }
     return inst;
   }
 
diff --git a/packages/webui-framework/src/element/diff.ts b/packages/webui-framework/src/element/diff.ts
index 194b49d2..b5561e25 100644
--- a/packages/webui-framework/src/element/diff.ts
+++ b/packages/webui-framework/src/element/diff.ts
@@ -132,12 +132,11 @@ export function syncRepeat(
 
     rep.instances = next;
 
-    // Reorder + update
     let cursor: Node | null = rep.start;
     for (let i = 0; i < next.length; i += 1) {
       cursor = host.$insertInstanceAfter(cursor, container, next[i].instance);
     }
-    for (let i = 0; i < next.length; i += 1) {
+    for (let i = 0; i < reuseCount; i += 1) {
       host.$updateInstance(next[i].instance);
     }
     return;
@@ -182,14 +181,15 @@ export function syncRepeat(
   rep.instances = next;
 
   // ── Reorder DOM (forward pass) ──────────────────────────────────
-  // Walk forward, skip nodes already in position.
+  // Newly-created instances were patched while detached. Reused instances
+  // update after moving so nested structural nodes stay with the item.
   let cursor: Node | null = rep.start;
   for (let i = 0; i < next.length; i += 1) {
     cursor = host.$insertInstanceAfter(cursor, container, next[i].instance);
   }
-
-  // ── Update bindings ─────────────────────────────────────────────
-  for (let i = 0; i < next.length; i += 1) {
-    host.$updateInstance(next[i].instance);
+  for (let i = 0; i < oldInstances.length; i += 1) {
+    const entry = oldInstances[i];
+    const k = entry.key;
+    if (k != null && !oldByKey.has(k)) host.$updateInstance(entry.instance);
   }
 }
diff --git a/packages/webui-framework/src/element/types.ts b/packages/webui-framework/src/element/types.ts
index d5732c5d..60d2fd3c 100644
--- a/packages/webui-framework/src/element/types.ts
+++ b/packages/webui-framework/src/element/types.ts
@@ -115,9 +115,9 @@ export interface RepeatItemInstance {
  */
 export interface RepeatHost {
   $resolveValue(path: string, scope?: ScopeFrame): unknown;
+  /** Create, wire, and perform the first binding pass while detached. */
   $createBlockInstance(blockIndex: number, scope?: ScopeFrame): TemplateInstance | null;
   $updateInstance(instance: TemplateInstance): void;
   $removeInstance(instance: TemplateInstance): void;
   $insertInstanceAfter(cursor: Node | null, container: ParentNode & Node, instance: TemplateInstance): Node | null;
 }
-
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/client-binding-lifecycle.spec.ts b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/client-binding-lifecycle.spec.ts
new file mode 100644
index 00000000..d1b8169a
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/client-binding-lifecycle.spec.ts
@@ -0,0 +1,269 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { expect, test, type Page } from '@playwright/test';
+
+type ChildSnapshot = {
+  value: string | undefined;
+  connectedValue: string;
+  fallbackApplied: string;
+  valueText: string | undefined;
+};
+
+function readChildSnapshot(page: Page, selector: string): Promise<ChildSnapshot | null> {
+  return page.evaluate((hostSelector) => {
+    const host = document.querySelector(hostSelector);
+    const child = host?.shadowRoot?.querySelector('test-lifecycle-child') as
+      | (HTMLElement & {
+        value?: string;
+        connectedValue?: string;
+        fallbackApplied?: string;
+        shadowRoot: ShadowRoot;
+      })
+      | null;
+    if (!child) return null;
+    return {
+      value: child.value,
+      connectedValue: child.connectedValue ?? '',
+      fallbackApplied: child.fallbackApplied ?? '',
+      valueText: child.shadowRoot?.querySelector('.value')?.textContent ?? undefined,
+    };
+  }, selector);
+}
+
+async function waitForChildValue(page: Page, selector: string, expected: string): Promise<void> {
+  await page.waitForFunction(
+    ({ hostSelector, value }) => {
+      const host = document.querySelector(hostSelector);
+      const child = host?.shadowRoot?.querySelector('test-lifecycle-child') as
+        | (HTMLElement & { value?: string })
+        | null;
+      return child?.value === value;
+    },
+    { hostSelector: selector, value: expected },
+  );
+}
+
+async function waitForConnectedValue(page: Page, selector: string, expected: string): Promise<void> {
+  await page.waitForFunction(
+    ({ hostSelector, value }) => {
+      const host = document.querySelector(hostSelector);
+      const child = host?.shadowRoot?.querySelector('test-lifecycle-child') as
+        | (HTMLElement & { connectedValue?: string })
+        | null;
+      return child?.connectedValue === value;
+    },
+    { hostSelector: selector, value: expected },
+  );
+}
+
+function readKeyedNestedSequence(page: Page, selector: string): Promise<string[]> {
+  return page.evaluate((hostSelector) => {
+    const host = document.querySelector(hostSelector);
+    const children = host?.shadowRoot?.children ?? [];
+    const sequence: string[] = [];
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.classList.contains('group-key')) {
+        sequence.push(`group:${child.textContent ?? ''}`);
+      } else if (child.localName === 'test-lifecycle-child') {
+        sequence.push(`child:${(child as HTMLElement & { value?: string }).value ?? ''}`);
+      }
+    }
+    return sequence;
+  }, selector);
+}
+
+test.describe('client binding lifecycle: CSR-created children', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/client-binding-lifecycle/fixture.html');
+    await page.waitForFunction(() => {
+      const el = document.querySelector('#ssr-parent-seed');
+      return (el as HTMLElement & { $ready?: boolean } | null)?.$ready === true;
+    });
+  });
+
+  test('child fallback from connectedCallback is not clobbered by an initially unset parent binding', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-parent');
+      parent.id = 'dynamic-fallback';
+      document.querySelector('#mount')?.appendChild(parent);
+    });
+
+    await waitForChildValue(page, '#dynamic-fallback', 'set-by-child');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-fallback');
+    expect(snapshot).toEqual({
+      value: 'set-by-child',
+      connectedValue: '<unset>',
+      fallbackApplied: 'yes',
+      valueText: 'set-by-child',
+    });
+  });
+
+  test('initial parent binding is visible during child connectedCallback', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-parent') as HTMLElement & { val?: string };
+      parent.id = 'dynamic-bound';
+      parent.val = 'set-by-parent-before-connect';
+      document.querySelector('#mount')?.appendChild(parent);
+    });
+
+    await waitForConnectedValue(page, '#dynamic-bound', 'set-by-parent-before-connect');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-bound');
+    expect(snapshot).toEqual({
+      value: 'set-by-parent-before-connect',
+      connectedValue: 'set-by-parent-before-connect',
+      fallbackApplied: 'no',
+      valueText: 'set-by-parent-before-connect',
+    });
+  });
+
+  test('later parent updates still flow to a child that used its connectedCallback fallback', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-parent');
+      parent.id = 'dynamic-live';
+      document.querySelector('#mount')?.appendChild(parent);
+    });
+    await waitForChildValue(page, '#dynamic-live', 'set-by-child');
+
+    await page.evaluate(() => {
+      const parent = document.querySelector('#dynamic-live') as HTMLElement & {
+        setParentValue(value: string): void;
+      };
+      parent.setParentValue('set-by-parent-after-connect');
+    });
+
+    await waitForChildValue(page, '#dynamic-live', 'set-by-parent-after-connect');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-live');
+    expect(snapshot).toEqual({
+      value: 'set-by-parent-after-connect',
+      connectedValue: '<unset>',
+      fallbackApplied: 'yes',
+      valueText: 'set-by-parent-after-connect',
+    });
+  });
+
+  test('conditional-created child fallback is not clobbered by the first binding pass', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-conditional-parent') as HTMLElement & {
+        showChild(): void;
+      };
+      parent.id = 'dynamic-conditional';
+      document.querySelector('#mount')?.appendChild(parent);
+      parent.showChild();
+    });
+
+    await waitForChildValue(page, '#dynamic-conditional', 'set-by-child');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-conditional');
+    expect(snapshot).toEqual({
+      value: 'set-by-child',
+      connectedValue: '<unset>',
+      fallbackApplied: 'yes',
+      valueText: 'set-by-child',
+    });
+  });
+
+  test('repeat-created child fallback is not clobbered by the first binding pass', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-repeat-parent') as HTMLElement & {
+        setItems(items: Array<{ id: string; value?: string }>): void;
+      };
+      parent.id = 'dynamic-repeat';
+      document.querySelector('#mount')?.appendChild(parent);
+      parent.setItems([{ id: 'missing' }]);
+    });
+
+    await waitForChildValue(page, '#dynamic-repeat', 'set-by-child');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-repeat');
+    expect(snapshot).toEqual({
+      value: 'set-by-child',
+      connectedValue: '<unset>',
+      fallbackApplied: 'yes',
+      valueText: 'set-by-child',
+    });
+  });
+
+  test('conditional-created nested repeat children are inserted after detached first update', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-conditional-repeat-parent') as HTMLElement & {
+        showItems(items: Array<{ id: string; value?: string }>): void;
+      };
+      parent.id = 'dynamic-conditional-repeat';
+      document.querySelector('#mount')?.appendChild(parent);
+      parent.showItems([{ id: 'missing' }]);
+    });
+
+    await waitForChildValue(page, '#dynamic-conditional-repeat', 'set-by-child');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-conditional-repeat');
+    expect(snapshot).toEqual({
+      value: 'set-by-child',
+      connectedValue: '<unset>',
+      fallbackApplied: 'yes',
+      valueText: 'set-by-child',
+    });
+  });
+
+  test('repeat-created nested repeat children are inserted after detached first update', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-nested-repeat-parent') as HTMLElement & {
+        setGroups(groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }>): void;
+      };
+      parent.id = 'dynamic-nested-repeat';
+      document.querySelector('#mount')?.appendChild(parent);
+      parent.setGroups([{ id: 'group', items: [{ id: 'missing' }] }]);
+    });
+
+    await waitForChildValue(page, '#dynamic-nested-repeat', 'set-by-child');
+
+    const snapshot = await readChildSnapshot(page, '#dynamic-nested-repeat');
+    expect(snapshot).toEqual({
+      value: 'set-by-child',
+      connectedValue: '<unset>',
+      fallbackApplied: 'yes',
+      valueText: 'set-by-child',
+    });
+  });
+
+  test('reused keyed repeat items move before nested repeats update', async ({ page }) => {
+    await page.evaluate(() => {
+      const parent = document.createElement('test-lifecycle-keyed-nested-repeat-parent') as HTMLElement & {
+        setGroups(groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }>): void;
+      };
+      parent.id = 'dynamic-keyed-nested-repeat';
+      document.querySelector('#mount')?.appendChild(parent);
+      parent.setGroups([
+        { id: 'a', items: [{ id: 'a1', value: 'A1' }] },
+        { id: 'b', items: [{ id: 'b1', value: 'B1' }] },
+      ]);
+    });
+
+    await page.waitForFunction(() => {
+      const parent = document.querySelector('#dynamic-keyed-nested-repeat');
+      return parent?.shadowRoot?.querySelectorAll('test-lifecycle-child').length === 2;
+    });
+
+    await page.evaluate(() => {
+      const parent = document.querySelector('#dynamic-keyed-nested-repeat') as HTMLElement & {
+        setGroups(groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }>): void;
+      };
+      parent.setGroups([
+        { id: 'b', items: [{ id: 'b1', value: 'B1' }, { id: 'b2', value: 'B2' }] },
+        { id: 'a', items: [{ id: 'a1', value: 'A1' }] },
+      ]);
+    });
+
+    await page.waitForFunction(() => {
+      const parent = document.querySelector('#dynamic-keyed-nested-repeat');
+      return parent?.shadowRoot?.querySelectorAll('test-lifecycle-child').length === 3;
+    });
+
+    const sequence = await readKeyedNestedSequence(page, '#dynamic-keyed-nested-repeat');
+    expect(sequence).toEqual(['group:b', 'child:B1', 'child:B2', 'group:a', 'child:A1']);
+  });
+});
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/element.ts b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/element.ts
new file mode 100644
index 00000000..9eb0e8d5
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/element.ts
@@ -0,0 +1,80 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { WebUIElement, observable } from '../../../src/index.js';
+
+export class TestLifecycleChild extends WebUIElement {
+  @observable value: string | null | undefined = undefined;
+  @observable connectedValue = '';
+  @observable fallbackApplied = 'no';
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.connectedValue = this.value ?? '<unset>';
+    if (this.value === null || this.value === undefined) {
+      this.value = 'set-by-child';
+      this.fallbackApplied = 'yes';
+    } else {
+      this.fallbackApplied = 'no';
+    }
+  }
+}
+
+export class TestLifecycleParent extends WebUIElement {
+  @observable val: string | undefined = undefined;
+
+  setParentValue(value: string): void {
+    this.val = value;
+  }
+}
+
+export class TestLifecycleConditionalParent extends WebUIElement {
+  @observable show = false;
+  @observable val: string | undefined = undefined;
+
+  showChild(): void {
+    this.show = true;
+  }
+}
+
+export class TestLifecycleRepeatParent extends WebUIElement {
+  @observable items: Array<{ id: string; value?: string }> = [];
+
+  setItems(items: Array<{ id: string; value?: string }>): void {
+    this.items = items;
+  }
+}
+
+export class TestLifecycleConditionalRepeatParent extends WebUIElement {
+  @observable show = false;
+  @observable items: Array<{ id: string; value?: string }> = [];
+
+  showItems(items: Array<{ id: string; value?: string }>): void {
+    this.items = items;
+    this.show = true;
+  }
+}
+
+export class TestLifecycleNestedRepeatParent extends WebUIElement {
+  @observable groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }> = [];
+
+  setGroups(groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }>): void {
+    this.groups = groups;
+  }
+}
+
+export class TestLifecycleKeyedNestedRepeatParent extends WebUIElement {
+  @observable groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }> = [];
+
+  setGroups(groups: Array<{ id: string; items: Array<{ id: string; value?: string }> }>): void {
+    this.groups = groups;
+  }
+}
+
+TestLifecycleChild.define('test-lifecycle-child');
+TestLifecycleParent.define('test-lifecycle-parent');
+TestLifecycleConditionalParent.define('test-lifecycle-conditional-parent');
+TestLifecycleRepeatParent.define('test-lifecycle-repeat-parent');
+TestLifecycleConditionalRepeatParent.define('test-lifecycle-conditional-repeat-parent');
+TestLifecycleNestedRepeatParent.define('test-lifecycle-nested-repeat-parent');
+TestLifecycleKeyedNestedRepeatParent.define('test-lifecycle-keyed-nested-repeat-parent');
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/index.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/index.html
new file mode 100644
index 00000000..f9bbaec6
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="utf-8"><title>Client Binding Lifecycle</title></head>
+<body>
+  <test-lifecycle-parent id="ssr-parent-seed" style="display:none"></test-lifecycle-parent>
+  <test-lifecycle-conditional-parent id="ssr-conditional-seed" style="display:none"></test-lifecycle-conditional-parent>
+  <test-lifecycle-repeat-parent id="ssr-repeat-seed" style="display:none"></test-lifecycle-repeat-parent>
+  <test-lifecycle-conditional-repeat-parent id="ssr-conditional-repeat-seed" style="display:none"></test-lifecycle-conditional-repeat-parent>
+  <test-lifecycle-nested-repeat-parent id="ssr-nested-repeat-seed" style="display:none"></test-lifecycle-nested-repeat-parent>
+  <test-lifecycle-keyed-nested-repeat-parent id="ssr-keyed-nested-repeat-seed" style="display:none"></test-lifecycle-keyed-nested-repeat-parent>
+  <div id="mount"></div>
+</body>
+</html>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html
new file mode 100644
index 00000000..8e7f768d
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-child/test-lifecycle-child.html
@@ -0,0 +1,3 @@
+<div class="value">{{value}}</div>
+<div class="connected-value">{{connectedValue}}</div>
+<div class="fallback-applied">{{fallbackApplied}}</div>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html
new file mode 100644
index 00000000..c8129c01
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-parent/test-lifecycle-conditional-parent.html
@@ -0,0 +1,3 @@
+<if condition="show">
+  <test-lifecycle-child :value="{{val}}"></test-lifecycle-child>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html
new file mode 100644
index 00000000..18b32d70
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-conditional-repeat-parent/test-lifecycle-conditional-repeat-parent.html
@@ -0,0 +1,5 @@
+<if condition="show">
+  <for each="item in items">
+    <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
+  </for>
+</if>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html
new file mode 100644
index 00000000..11e81075
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-keyed-nested-repeat-parent/test-lifecycle-keyed-nested-repeat-parent.html
@@ -0,0 +1,6 @@
+<for each="group in groups">
+  <span class="group-key" data-id="{{group.id}}">{{group.id}}</span>
+  <for each="item in group.items">
+    <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
+  </for>
+</for>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html
new file mode 100644
index 00000000..312c8b67
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-nested-repeat-parent/test-lifecycle-nested-repeat-parent.html
@@ -0,0 +1,5 @@
+<for each="group in groups">
+  <for each="item in group.items">
+    <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
+  </for>
+</for>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html
new file mode 100644
index 00000000..5d2d7770
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-parent/test-lifecycle-parent.html
@@ -0,0 +1 @@
+<test-lifecycle-child :value="{{val}}"></test-lifecycle-child>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html
new file mode 100644
index 00000000..adb8181a
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/src/test-lifecycle-repeat-parent/test-lifecycle-repeat-parent.html
@@ -0,0 +1,3 @@
+<for each="item in items">
+  <test-lifecycle-child :value="{{item.value}}"></test-lifecycle-child>
+</for>
diff --git a/packages/webui-framework/tests/fixtures/client-binding-lifecycle/state.json b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/state.json
new file mode 100644
index 00000000..0146bbfe
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/client-binding-lifecycle/state.json
@@ -0,0 +1,5 @@
+{
+  "show": false,
+  "items": [],
+  "groups": []
+}