How to Isolate a DIV and its contents from external CSS

user_3392772 0
Viewed 2127

I'm creating a chat widget that will inject a div to the body of his website. However, I don't want the div to apply CSS from default style sheet of the website.

Is there any way to isolate a div like this?

Most of the existing solutions needs to change CSS code in their website, which is not possible for me

css html javascript
3 Answers

Shadow DOM with scoped CSS seems to be a good solution. However, it's still not production-ready, lacks browser support.

I ended up using Cleanslate CSS. It adds an extra ~20KB CSS. But do the job really well. Support all browsers too.

user_33927720
Related