[Feature]: support rendering in Shadow DOM [Fluent UI React v9]

[layershifter]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

I would like to be able to render Fluent UI React v9 components inside Shadow DOM. Currently it's impossible.

Styles rendering

Griffel does not support rendering to ShadowRoot and existing renderer does not work adoptedStyleSheets.

• [ ] https://github.com/microsoft/griffel/issues/369

FluentProvider & targetDocument

There is a series of issues related to that, read below.

Portals rendering

TL;DR Portal uses ReactDOM.createPortal() and creates nodes to mount in light DOM i.e. in a host document.

• [ ] #27762

Event listeners binding

TL;DR useClickOutside() and some other hooks use targetDocument to bind event listeners. There hooks should handle shadow roots as a target and bind handlers to proper elements.

• [ ] #27763

Focus indicators

TL;DR We use a custom wrapper to :focus-visible that relies on an element and window references ➡️ focus indicators are not visible inside Shadow DOM.

• [ ] #27760

document.activeElement

Use of document event through targetDocument might be unsafe.

Interop with Fluent v8

Ensure the Fluent v9 implementation works alongside Fluent v8.

• [ ] #28063

Have you discussed this feature with our team

@spmonahan

Additional context

• Corresponding Fluent v8 issue: #28058

Validations

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