Codemirror allows me to edit other elements on my website


I’ve searched, and can’t seem to find a solution to this. I feel like I am being really dumb and missing something really obvious.

I have a Vue component using codemirror, and when I edit CSS in the codemirror, it allows me to edit all of the CSS on my entire web page. This also works with the JavaScript mode, which allows me to console log different variables, and will not let me use variables which are already in use on my website.

Is there a way to isolate codemirror to its own element which stops it editing everything else?


Figured out this was because we were injecting the CSS/JS straight into the head as it was being edited.

Please close and ignore.