I am injecting JS widget script on webpage which loads JS as well styles for widget. Code is injected inside body tag but how can I make sure widget does not inherits CSS from body tag? How can I isolate widget from other web page CSS?? Note: I don't want to use iframe. Any other possible solutions?
you could put the widget into <iframe> so it won't inherit styles from already existing CSS
if iframe is not an option then i guess you would have to manually exclude styles?
like, you could try querying all your widget elements and put them all: unset style
so they should have default values, instead of inherited from any CSS
(i think revert or initial will be better instead of unset, because it fallbacks to inherited stuff, which you want to avoid)