Recommand · October 22, 2021 0

Is there any other way to fix this problem besides using !importand after every line css

I’m currently working on an online code editor. (like jsfiddle codepen etc…)

I got everything working, but I ran into one problem; If a user does something like this:

button { 
 background-color: red;
}

It also changes the properties of my "run code" and "reset" button I made.

same thing with other things like a div;

div {
padding: 500em;
}

because this will also change the div’s Im using in my own code.

I fixed the issue using !importand tags after every line in my css but I’m wordering if there is any other way to fix this? or is !importand really the only way.

As said in the comment by CBroe. To do this you can use iframe.

A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it’s fairly new :
support for shadow root api

But, I’ve used it myself and it’s a little bit harder to understand at first