`<f-when>` Does Not Re-evaluate 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.

Field	Detail
Expected	<f-when condition="showSection"> hides/shows its content when showSection changes.
Actual	The <f-when> block reflects only the initial server-rendered state. Toggling the observable has no effect on the DOM. The {{showSection}} interpolation in nearby text DOES update.
Root cause	<f-when> is a compile-time directive processed by @microsoft/fast-html during SSR. During defer-and-hydrate, the hydration pass does not subscribe the <f-when> block to the condition observable.
Affected apps	settings_btr (back button visibility), downloads_btr (empty state), permission_prompt_btr, all BTR apps using conditional rendering.
Severity	P1 — Broken functionality. Any BTR page that needs to show/hide sections based on state changes is affected.
Workaround	Imperative DOM manipulation — manually create/remove elements instead of relying on <f-when>. See Workaround A.
Suggested fix	Framework-level: <f-when> blocks should subscribe to their condition observable during hydration, mirroring when() behavior in standard FAST Element.

[janechu]

I've updated this to reflect FAST syntax.

[janechu]

We investigated this issue and found that the behavior described is already covered by an existing test in the packages/fast-html/test/fixtures/when fixture.

The test "create a when directive for a boolean: true" (when.spec.ts, line 4) validates the exact scenario:

1. Renders #show with the show attribute set → <f-when> displays "Hello world"
2. Renders #hide without show → <f-when> hides content
3. After hydration, removes show from #show and adds show to #hide via page.evaluate()
4. Asserts #show no longer shows "Hello world" and #hide now shows it

This test is passing across all browser projects (chromium, firefox, webkit), confirming that <f-when> does re-evaluate after defer-and-hydrate when the underlying observable property changes.

If you're seeing different behavior in your application, it may be related to how the observable is being mutated or a difference in your component setup. Could you provide a minimal reproduction so we can investigate further?