Inject styles inside shadow dom.

[tgreblicki]

Hello,
I am working on the embeddable React application that is using ui5-webcomponents-react as a component library.

Since the application is rendered inside a shadow root, ui5-webcomponents-react styles are not applied. If I disable shadow root, all styles are applied.

In the previous version that used jss, I was able to partially bypass this issue by configuring jss insertionPoint inside the shadow root.

Now that jss is gone, I am curious if there is any other way to specify a CSS injection point?

Here is a sample application that reproduces the issue.
https://github.com/tgreblicki/embeddable-ui5-example

[Lukas742]

Hi @tgreblicki,

this was a tricky one! 😄

Our stylesheets are added to the adoptedStyleSheets of the document, which means they aren't available inside a shadowRoot. To include them in the shadow root, they need to be synchronized with the adoptedStyleSheets of the shadowRoot. You can achieve this by registering with our StyleStore.

To make it easier to understand, I’ve forked your example repo and applied the necessary changes there. Please note that we currently have a bug in the store (only in v2; this issue has been fixed in v1), which might impact the sync logic. A fix will be available next week at the latest.

Fork: https://github.com/Lukas742/embeddable-ui5-example

If you prefer, I can also open a PR in your repo - just let me know! 🙂

[tgreblicki]

Thanks, solution provided in the fork worked.