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

Đang mở
  • Có gì không ổn?
#36,299 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

@radium-v đang làm issue này rồi.

Từ ngày 10/6/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
20.4k
Fork
3k
Merge trung bình
3 ngày 20 giờ
Pull request đã merge (30 ngày)
104

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/fluentui

Tất cả issue của microsoft/fluentui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.