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

Abierto
  • ¿Algo no está bien?
#36,299 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 2 días

@radium-v ya está trabajando en esto.

Desde el 10/6/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

Fluent UI WC (v3) Type: Bug :bug: web-components
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.
Lenguaje dominante
TypeScript
Estrellas
20.4k
Forks
3k
Merge medio
3 d 21 h
PR fusionados (30 d)
99

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.