[Epic]: support rendering in Shadow DOM [Fluent UI React v8] #28058
Description
Library
React / v8 (@fluentui/react)
Describe the feature that you would like added
I would like to be able to render Fluent UI React v8 components and icons inside Shadow DOM.
Styles rendering
mergeStyles does not support rendering to ShadowRoot nor adoptedStyleSheets
Icons
Icons do not render properly render in ShadowRoots. This is likely because icons are fonts in Fluent v8. This seems to depend on environment. In Codesand box only the styles like color and size are missing. Locally in Storybook the icons themselves are missing.
SVG Icons
- [Bug]: Fluent v8 SVG icons do not work with Shadow DOM #28835
See issue for more details but this is going on the back burner for now.
Layers
Need to determine where layers that are generated from a shadow root render (in the shadow root or in the light DOM?)
Focus indicators
Need to investigate FocusRects and shadow DOM.
- Investigate FocusRects inside ShadowRoots for Fluent React v8 #28061
- [Feature]: Ensure FocusZone and FocusTrapZone work with Shadow DOM #29350
mergeStyles API additions
- [Feature]: New mergeStyles APIs for shadow DOM #28836
- [Feature]: Maintain stylesheet order in
adoptedStyleSheets#30080
Update all Fluent v8 controls to support shadow DOM rendering
Browser support
Testing
- [Feature]: Add shadow DOM visual regression tests for all Fluent v8 controls #28903
- [Feature]: Add unit tests for shadow DOM features #28904
Interop with Fluent v9
Ensure the Fluent v8 implementation works alongside Fluent v9.
Have you discussed this feature with our team
Additional context
- Corresponding Fluent v9 issue: [Feature]: support rendering in Shadow DOM [Fluent UI React v9] #27759
Validations
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.