Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

Fluent React v8's mergeStyles package should support rendering styles into Shadow DOM via adoptedStyleSheets and constructable stylesheets.

This feature will allow FUIv8 users to place components inside ShadowDOM to better manage light DOM size and style recalculations. Constructable stylesheets will reduce memory impact and allow for management of styles similar to the existing solution.

This feature is entirely opt-in and will not be enabled by default.

A design goal of this feature is to require minimal changes for users to leverage shadow DOM and minimal changes to Fluent UI v8 itself to support shadwo DOM.

Have you discussed this feature with our team

@layershifter

Additional context

A proof of concept has been implemented here (diff).

To see it in action:

1. Pull the branch
2. yarn
3. yarn start > @fluentui/react
4. Navigate to the DefaultButton example.

The changes are a bit messy and the implementation is not 100% working but it proves the general plan.

Overview

1. Changes are almost 100% internal to merge-styles and the styled function.
   1. Introduces a new concept called "stylesheet key" which is analogous to styled's "scope". This is used to bucket styles into different constructable stylesheets so all "SpinButton" styles are in one sheet and nothing else is in there.
   2. In the event something doesn't have a key it is put in the "global" bucket. All shadow roots and the document adopt this sheet.
2. To target shadow roots with specific styles a MergeStylesContext has been introduced.
   1. Context keeps track of which styles have been adopted and correctly adopts styles into the shadow root.
   2. This will likely be rolled into react-shadow's proxy
   3. Will need to interop with Fluent v9 and app styles
3. Not all components use styled :(
   1. Notably, DefaultButton uses @customizable.
   2. It is also possible to plumb the stylesheet key through this code path.

Validations

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