Library Styles In the Shadow Dom

[Gavin Sauder (gavinsauder)]

I have a chat widget that gets embedded on websites, and I'd like to use the shadow dom to isolate the styles for my widget from the website. It appears like native acs styling does not work in the shadow dom from my testing. Does this library support the shadow dom? If so, how would we implement it? Or is there another way to do this?

[mgamis-msft]

Hi Gavin Sauder (@gavinsauder). let me look into this and get back to you. I have a couple of questions:

1. For confirmation, are you using the chat composite as documented in our storybook page here when you say chat widget?
2. Could you provide a high level snippet of your code just so I can reproduce it locally?

[Gavin Sauder (gavinsauder)]

Hi mgamis-msft,

We are using the messageThread and Sendbox components. I put together a little sample: https://gist.github.com/gavinsauder/90528d661fd662303050dd369f057e64

If you remove the shadow dom(line 9-13) and do createRoot of the htmlElement directly. You can see it's styled. But when using the shadow dom the styles are not being pulled in.

[Annie Wang (awang119)]

Gavin Sauder (@gavinsauder) Thanks for your inquiry. We don't support that and won't be able to for the time being. The current work around can be putting your code into an iframe for css encapsulation.