I've been using scoper and it has been working well. But today I got a strange behavior that breaks the code. I have:

<a href="'+pagelink+'" target="_blank"> <img src="'+imgpath+'" class="extLinkImg"> <style scoped> .extLinkImg { width: 35px; height: 35px; margin:10px; } <\style> </a>

And I see in the console that what is being put in the head <style> is:

#scoper-2 .extLinkImg { width: 35px; height: 35px; margin:10px; } <style> </a>

It seems that scoper is not seeing the ending / in the closing tag...
I tried the same code inside a wrapping div and is the same. Do you have any clue why this is happening?

Again, in Chrome/Vivaldi, using ":root" selector doesn't seem to have any effect
It is important, because you'd want to use ":root" or "html" to specify font-size and use "rem" size units

The error ReferenceError: document is not defined shows when I tried to use it in the node environment.

Maybe we can add a null check before calling document.createElement?

Chrome:
"Mixed Content: The page at 'https://fiddle.jshell.net/rpe402LL/17/show/' was loaded over HTTPS, but requested an insecure script 'http://thomaspark.github.io/scoper/scoper.min.js'. This request has been blocked; the content must be served over HTTPS."

https://developer.mozilla.org/de/docs/Web/CSS/:scope

scoper.js attempts to wrap elements where the scoped style element is a direct descendant, which effectively eliminates the applicability of the style content. I think it's fairly safe to just leave these style elements as is since they apply to the whole body.

I know this is an unusual case with an obvious manual workaround, but I'm auto generating the html and I don't always know where the scoped styles are going to be placed in the document.