Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

For Fluent controls shadow DOM support is added via the styled and customizer higher order components. Any call to mergeStyles (and associated APIs like mergeStyleSets) will land in global scope (with the shadow DOM implementation at the time of this writing). In short: styles are still usable in shadow DOM but they are placed in a "global" bucket meaning adopting them is not as optimal as it could be.

We'd like to add APIs to @fluentui/merge-styles to allow users to better scope their components for shadow DOM when calling mergeStyles, mergeStyleSets, etc.

Have you discussed this feature with our team

@spmonahan

Additional context

It's possible that we don't need to introduce any new APIs for this behavior -- we didn't need to implement them for Fluent controls.

I'm adding this issue so we can consider it further and keep track of it.

Validations

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

Priority

Normal