[Epic]: support rendering in Shadow DOM [Fluent UI React v8]

[spmonahan]

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

• [x] #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.

• [x] #28059

SVG Icons

• [x] #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?)

• [x] #28060

Focus indicators

Need to investigate FocusRects and shadow DOM.

• [x] #28061
• [x] #29350

mergeStyles API additions

• [x] #28836
• [x] #30080

Update all Fluent v8 controls to support shadow DOM rendering

• [x] #28902

Browser support

• [x] #29517

Testing

• [x] #28903
• [x] #28904

Interop with Fluent v9

Ensure the Fluent v8 implementation works alongside Fluent v9.

• [ ] #28063

Have you discussed this feature with our team

@layershifter

Additional context

• Corresponding Fluent v9 issue: #27759

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.