[Bug]: Inherited CSS white-space cascades into shadow boundary; :host reset is not reliable

[bearcat-msft]

Related Issue

Follow-up to #36282 — splitting into focused issues for clearer tracking.

Component

All components with shadow DOM

Package version

3.0.0-rc.15

@microsoft/fast-element version

2.10.4

Environment

System:
    OS: macOS 15.7.7
    CPU: (8) x64 Apple M2
    Memory: 20.61 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 149.0.7827.53
    Edge: 148.0.3967.96
    Safari: 26.0.1
  npmPackages:
    @fluentui/react-components: 9.73.8 => 9.73.8 
    @fluentui/web-components: 3.0.0-rc.15 => 3.0.0-rc.15 
    @microsoft/fast-element: ^2.10.4 => 2.10.4

Current Behavior

CSS properties like white-space inherit through the shadow boundary, affecting internal component rendering. When a parent sets white-space: pre or similar, it cascades into the component and changes layout behavior unexpectedly.

Additionally, using :host { white-space: normal; } as a defensive reset has a weakness — it can be overridden by greedy * selectors in consumer styles.

Current workarounds

1. Consumer-side patch: Set fluent-field { white-space: normal; } in light DOM
2. Component-side :host reset: Set white-space: normal on :host in shadow stylesheet
   • ⚠️ Can be overridden by consumer * selectors

Proposed Solutions

1. Wrapper root element with white-space reset — Wrap template content in an element with white-space: normal (more resilient but changes DOM structure). A root element encapsulates more effectively than :host
2. :host reset for white-space — Add white-space: normal to :host in component stylesheets (with caveat that consumer * selectors can override)
3. Eliminate whitespace from templates — Ship single-line templates in ESM (requires per-template care since some whitespace may be structural)

Expected Behavior

Components should encapsulate their internal styling and not be affected by inherited CSS properties from parent elements.

Reproduction

https://stackblitz.com/edit/vitejs-vite-vcgc2r59?file=src%2Fmain.js

Steps to reproduce

1. Open the StackBlitz reproduction
2. Observe how inherited white-space values affect component rendering
3. Try applying :host { white-space: normal; } and note it can still be overridden

Are you reporting an Accessibility issue?

None

Suggested severity

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there is not already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.