Enabling shadow DOM on a application built with twilio-paste

[iyinolu]

I am building a webchat widget powered by Twilio conversation. A major challenge I face is preventing Twilio Paste stying from clashing with the underlying website styles. I have tried 2 potential solutions: Shadow DOM and iFrames but these methods have failed.

Is there a way to access Twilio paste style manager's target parameter? This will enable me to customise the location that twilio paste styles are injected to. I am available to provide more information if you need any. Thanks.

[TheSisb]

Hi @iyinolu,

Some more information (or even a codesandbox) would be very helpful. What kind of style clashes are you dealing with?

Also, have you considered using our CustomizationProvider? It should allow you to override any styles on our components.

[iyinolu]

@TheSisb any thoughts?

[TheSisb]

@iyinolu I've added a PR to support injecting styles into the Shadow DOM: #3200

I'll report back when it is released

[iyinolu]

Awesome! thanks. Look forward to the release.

[SiTaggart]

Hi @iyinolu

This feature is now out in Paste Core v19.1.0. It requires you to do a little work to wrap the app, but I've created an example in CodeSandbox to show how it can be done using react-shadow

https://codesandbox.io/p/sandbox/paste-with-shadowdom-vvlqer?file=%2Fsrc%2FApp.tsx

[iyinolu]

Thanks! much appreciated.

[claudiachua]

Hi @SiTaggart , thanks for new feature that enables ShadowDOM 🎉

I'm currently facing some issues when I use it to encapsulate <UserDialog>,<UserDialogUserInfo>,</UserDialogContainer>. Was wondering if this is a known issue and if there's any workaround to it? Thank you!

I forked the CodeSandbox that you provided to include UserDialog: https://codesandbox.io/p/sandbox/paste-with-shadowdom-forked-4zphrz?file=%2Fsrc%2FApp.tsx

[SiTaggart]

It hadn't really crossed my mind, but it makes sense, I guess. A decent amount of transient components display their disclosed content in a React portal. This will render it outside the current DOM tree and thus outside the Shadow Root.

[SiTaggart]

You can kinda get around it by using the state hook of any Dialog or popover component, and setting the modal argument to false, so it doesn't use a portal. You'll have to play with it to get it working fully, but the styles seem to work https://codesandbox.io/p/sandbox/paste-with-shadowdom-forked-d4txwr?file=%2Fsrc%2FApp.tsx%3A45%2C91

Alternatively, the dialog itself might need to live in it's own shadow so that when it's Portaled it keeps the encapsulation...

Generally we're not execpting the need of Shadow Style encapsulation in internal products though, so we're wondering why you need this at all.

[claudiachua]

You're a genius! Thanks for the suggestion of using State hooks to prevent using the portal. 🙇‍♀️

Not sure if I need to venture to the alternate option that you mentioned. A small issue that I'm seeing is that when UserDialog is encapsulate within the Shadow, the popup (down arrow) only work once. Once you expand and collapse, it will not expand again. Let me know if I should start a new discussion about this.

[claudiachua]

Started a new discussion #3527