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.

• core: create a renderer that works with Shadow DOM griffel#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.

• [Bug]: portals should render in Shadow DOM [v9] #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.

• [Bug]: event handlers should be bind properly for Shadow DOM [v9] #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.

• [Bug]: focus indicators don't work in Shadow DOM [v9] #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.

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

Have you discussed this feature with our team

@spmonahan

Additional context

• Corresponding Fluent v8 issue: [Epic]: support rendering in Shadow DOM [Fluent UI React v8] #28058