Styles: add shadow DOM support

[OEvgeny]

Fixes #5194

Changelog Entry

• (Experimental) Added support for using WebChat inside a shadow DOM, in PR #5196, by @OEvgeny
  • Added styleOptions.stylesRoot property allowing users to specify the root node where WebChat styles should be placed, in PR #5196, by @OEvgeny
  • Added the ThemeProvider.styles property, allowing theme packages to place styles into the same root node as WebChat, in PR #5196, by @OEvgeny
  • Added nonce for Fluent and react-scroll-to-bottom injected styles, in PR #5196, by @OEvgeny
  • Updated react-scroll-to-bottom to version 4.2.1-main.53844f5, in PR #5196, by @OEvgeny

Description

The change allows to mount webchat inside of shadow roots by providing the container for emotion and Fluent styles.

TODO:

• react-scroll-to-bottom styles: need to update emotion usage on the library side and update the library.
• react-film styles: need to update emotion usage on the library side and update the library.

Design

The design encapsulates related code into dedicated modules and centralizes style injection.

With the new approach, the Fluent theme passes styles down to WebChat, which then determines the appropriate location to inject these styles.

Instead of calculating the root node before mounting the rest of the component tree, we let user specify the desired location for the styles.

Specific Changes

• Reworked useStyleToEmotionObject
• Added useInjectStyles
• Refactored useStyleToEmotionObject usage
• Added the styles prop to ThemeProvider
• Renamed ContextType to ThemeContextType
• Fluent: reworked injectStyles to createStyles
• Added styleOptions.stylesRoot
• Added tests

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)