Is it possible to use DaisyUI for an embeddable widget without leaking styles to consumer app?

[knajjars]

I've am building a react widget that external websites can add by adding it via the <script /> tag. The CSS is contained within the JS code. The issue I am facing is that all the baseline styles are applied to the consumer app, is there a way to scope the CSS to only my widget ?

[saadeghi]

It's a common practice to use iframe when you want to inject a widget in another website. Almost every site does this about embedding (Youtube, Facebook, Twitter, etc)
Because usually you wouldn't want the host website ti manipulate the content or style of your widget in anyway.
But if you don't want to use iframe, there are other solutions like adding a prefix to class names, scoping and mangling styles, or using PostCSS plugins for other style manipulations.
About the base styles, daisyUI has a themeRoot config where you can set a specific CSS selector instead of document root.

Apart from daisyUI, Tailwind CSS has some global reset styles called preflight. Don't disable it, but you can customize it to only target your widget.

Let me know if you have a question.