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

オープン
  • 何か問題がありますか？
#36,299 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

@radium-v がすでに取り組んでいます。

2026年6月10日 から。

評価

この issue はまだ評価されていません。

説明

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.
主要言語
TypeScript
スター
20.4k
フォーク
3k
平均マージ
3日 21時間
マージ済み PR（30日）
99

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

microsoft/fluentui のほかの issue

microsoft/fluentui の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。