I need to add a <style> tag to a page using JavaScript, and we find that if we document.head.appendChild(tag), sometimes these sites will have dynamically-added <style> or <link> tags appearing either later in the <head>, or in the <body>. I'm wondering about changing the location of where we add our <style> to be document.documentElement.appendChild(tag) instead, which puts it outside of the <body> tag as the last child inside the <html> tag.
I'm aware this isn't a valid spot for this tag according to HTML's content model (so if that will pose some kind of problem you can foresee I'd love to hear it.) I've checked in browsers, and all browsers IE9+ seem to support CSS in this location. It seems like it should come after all CSS that's present in HTML (since parsing HTML would never result in tags ending up there.)
Have you ever seen anybody adding styles between </body> and </html>, or can you think of any reason where this might break something or cause a conflict?