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

• [Feature]: Add ShadowDOM support to mergeStyles in Fluent React v8 #28062

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.

• [Bug]: Fluent v8 icons do not work with Shadow DOM #28059

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?)

• Investigate Layer and Portal support for Shadow DOM in Fluent React v8 #28060

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

• [Feature]: Add shadow DOM support to all Fluent controls #28902

Browser support

• [Feature]: Implement constructable stylesheets polyfill #29517

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.

• [Feature]: Ensure Fluent v8 and Fluent v9 ShadowDOM implementations work together #28063

Have you discussed this feature with our team

@layershifter

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.