Hard to use with CSS-in-JS libs.

## Background

I'm currently using Netlify CMS to build a website for a client. It's a completely static site, but it uses React as a template engine. I also use the React bundle to render a preview inside Netlify CMS.

The other important detail is that this website is styled with [styled-components](https://www.styled-components.com/), which works by injecting css rules into `document.getElementsByTagName('head')[0]`.

## The Problem

Netlify CMS [transplants](https://github.com/netlify/netlify-cms/blob/54476cccd32d4edb8f6805b1bf0640463fec1e0d/src/components/ScrollSync/ScrollSyncPane.js#L18) the preview component inside an iframe, while the `` elements generated by `styled-components` remain outside the iframe. This leaves me with an unstyled preview, which is most unappealing. ✨

I haven't tested, but I expect this to affect other CSS-in-JS libraries like [Glamorous](https://glamorous.rocks/), [jsxstyle](https://github.com/smyte/jsxstyle), or [JSS](https://github.com/cssinjs/jss) as well as any other React library that injects extra elements, like [react-helmet](https://github.com/nfl/react-helmet) or [react-portal](https://github.com/tajo/react-portal).