CODEWITHSUNDEEP
javascripthtmlcss
lgc_ustc
lgc_ustc

Reputation: 1664

Prevent embedded third-party CSS from leaking to parent without iframes

I have an Single Page Application (SPA) which needs to load some third-party HTML/CSS code as a string, and inserts it somewhere on the page. We have absolutely no control on how the third-party code is written. If the dev of the CSS code creates some rules that apply to generic elements, that can mess up our SPA styles.

For example, such a rule can come in the third-party CSS code:

body { margin: 0; }

And it can change our SPA's body margin to 0, undesirably.

So the problem is: how do I prevent such third-party CSS code from "leaking" to parent elements?

To fix this problem, of course I can use iframes. But I'd like to stay away from it as long as possible.

Any idea for a clean solution?

Update: maybe Shadow DOM can help?

Thanks!

Upvotes: 1

Views: 676

Answers (1)

Rahul
Rahul

Reputation: 4364

No, there is no such way apart from iframe as per my knowledge to prevent other css files to affect yours

but what i suggest you is communicate well with your other devs and come with solutions which wont affect your code as well as fixed devs problem too.

anyways you can use css precedence to overwrite those changes, hope it helps...

Upvotes: 1

Related Questions