`:prop` Bindings Do Not Push Updates After Hydration

[mcritzjam]

🐛 Bug Report

After client-side hydration, structural template directives (<f-when>,
<f-repeat>) and property bindings (:prop) do not re-evaluate when their
underlying @observable properties change. Simple {{interpolation}} and
attribute bindings DO work reactively, creating an inconsistency that forces
app developers into imperative DOM workarounds.

💻 Repro or Code Sample

Field	Detail
Expected	<child-display :message="{{parentMessage}}"> updates the child's message property when parentMessage changes.
Actual	The child receives the initial value during SSR but the binding does not propagate subsequent changes. The parent's {{parentMessage}} interpolation DOES update.
Root cause	Property bindings (:prop) perform a one-time assignment during hydration but do not establish ongoing subscriptions like FAST Element's :prop="${x => x.value}" arrow-function bindings.
Affected apps	settings_btr (page data propagation), any BTR app passing data between parent and child components via :prop.
Severity	P1 — Broken functionality. Parent-to-child data flow is a fundamental component communication pattern.
Workaround	Fresh element creation — replace the child element entirely. See Workaround C.
Suggested fix	Framework-level: :prop bindings should establish ongoing subscriptions during hydration, identical to FAST Element's runtime property binding behavior.

[janechu]

I've updated this to reflect FAST syntax.

[janechu]

We've added a dedicated property binding test fixture in PR #7326 (packages/fast-html/test/fixtures/property/) to validate :prop binding behavior with defer-and-hydrate.

The test verifies:

1. Initial :title="{{message}}" property binding is applied after hydration
2. Content binding {{message}} renders correctly
3. Post-hydration reactivity — updating the message attribute on the custom element correctly propagates to both the :title property binding and {{message}} content binding

The test is passing, confirming that :prop bindings do establish ongoing subscriptions during hydration and update correctly when the underlying observable changes.

If you're seeing different behavior in your application, could you provide a minimal reproduction? It may be related to a specific component setup (e.g., non-@attr observable properties, nested child custom elements, or a different templateOptions configuration).