Use React portals to render inside shadow dom and iframes

Frame.js

class Frame extends Component {
  componentDidMount() {
    this.iframeHead = this.node.contentDocument.head
    this.iframeRoot = this.node.contentDocument.body
    this.forceUpdate()
  }

  render() {
    const { children, head, ...rest } = this.props
    return (
      <iframe {...rest} ref={node => (this.node = node)}>
        {this.iframeHead && ReactDOM.createPortal(head, this.iframeHead)}
        {this.iframeRoot && ReactDOM.createPortal(children, this.iframeRoot)}
      </iframe>
    )
  }
}

<Frame head={<title>Hello World</title>}>
  <h1>Hello World</h1>
</Frame>

Shadow.js

class Shadow extends Component {
  componentDidMount() {
    this.shadowRoot = this.node.attachShadow({ mode: this.props.mode })
    this.forceUpdate()
  }

  render() {
    const { children, ...rest } = this.props
    return (
      <div {...rest} ref={node => (this.node = node)}>
        {this.shadowRoot && ReactDOM.createPortal(children, this.shadowRoot)}
      </div>
    )
  }
}

<Shadow mode="open">
  <h1>Hello World</h1>
</Shadow>