--- name: tw-blazor-css-strategy description: How to style Blazor + FluentUI components in this repo without Tailwind. CSS isolation for every component, global design tokens, a native-root anchor plus targeted ::deep for FluentUI light-DOM children, ::part() for shadow DOM, and a ban on `, not ``, not a static `` example, and it spread to FormField (task 234), LoginPage and Profile. - Task 290 (2026-10-09): Exception B's `` was the cause of the prerender first-paint flash (0 shell rules before interactive, 24 after). Exception B is retired. Wall A is still real on .NET 11, so Fluent children are reached with an anchored `::deep` in the component's own `.razor.css` instead: the same locality Exception B wanted, in a stylesheet the browser loads before first paint. Static stylesheets in `` for Fluent children were the alternative; they bring back a global file per area, so they were not chosen. ## Notes - FluentUI v5 did **not** remove Wall A or Wall B. The strategy is the same across v4 and v5. - Proof: `tests/container-apps/web/web-spa-playwright-tests/first-paint-playwright-tests.cs` measures the shell with JavaScript off, with `blazor.web.js` blocked, and settled interactive, and requires the same app bar, logo and search boxes and the brand header in all three. CI uploads its screenshots as the `playwright-` artifact.