Use ownerDocument instead of global document

[yamachig]

It seems that on Microsoft Edge, you cannot appendChild an Element from different Document.
This causes a problem, for example, when you are using StyleSheetManager with a new window created by window.open, like this code:

import React from 'react';
import { createPortal } from 'react-dom';
import styled, {StyleSheetManager} from 'styled-components';

export const NewWindow = props => {
  const [newWindowBody, setNewWindowBody] = React.useState(null);
  const unloaded = React.useRef(false);

  React.useEffect(() => {
    if (!unloaded.current && !newWindowBody) {
      const w = window.open("about:blank");

      w.addEventListener('load', () => {
        setNewWindowBody(w.document.body);
      });

      w.addEventListener('unload', () => {
        unloaded.current = true;
        setNewWindowBody(null);
      });

      setNewWindowBody(w.document.body);
    }
  });

  return newWindowBody && createPortal(
    <StyleSheetManager target={newWindowBody}>
      {props.children}
    </StyleSheetManager>,
    newWindowBody,
  );
}

const Button = styled.button`
  border: none;
  background: palevioletred;
  color: white;
`;

export const TestNewWindow = () => {
  return (
    <NewWindow>
      <Button>
        Hello from new window!
      </Button>
    </NewWindow>
  )
}

This code throws an error on Edge, but not on Chrome or Firefox. (I tested with Microsoft Edge 44.18362.267.0.)

I replaced the global document variables with dynamically created Document from ownerDocument so that the code works properly on Edge.

[quantizor]

This looks good to me!

[quantizor]

@yamachig could you add a changelog entry and if possible also submit the same PR against canary?

Thanks!

[yamachig]

@probablyup thank you for reviewing! OK, I added a changelog entry and submitted the same PR #2726 against canary.

[quantizor]

Thanks!

[Jessidhia]

I'd write this as:

const targetDocument = target ? target.ownerDocument : tagEl ? tagEl.ownerDocument : document

but that's just my anti-mutability bias 🤷‍♀

[yamachig]

@Jessidhia thank you for reviewing! I agree with anti-mutability, though, the eslint rule (no-nested-ternary) didn't let me do so :)

[Jessidhia]

Interesting that this causes no security issues; apparently any <style> tags' associated StyleSheet are considered same-origin. https://html.spec.whatwg.org/multipage/semantics.html#the-style-element:concept-css-style-sheet-origin-clean-flag

This can still break for CSP reasons, though, but it'd break regardless of whether we use CSSOM or child text nodes.

[Jessidhia]

Looks like the travis config / vm is way broken.

[quantizor]

@yamachig rebase when you get a chance

[yamachig]

@probablyup OK, I rebased. Is that correct?

[quantizor]

Yeah looks like CI is passing now, good.