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>

I used the shadow dom to isolate Styles here is the functional component version of it:

const ShadowWrapper = (props) => {
  const { children, mode = "open", ...rest } = props;

  const ref = useRef();
  const [shadowRoot, setShadowRoot] = useState(null);

  useEffect(() => {
    setShadowRoot(ref.current.attachShadow({ mode }));
  }, []);

  return (
    <div {...rest} ref={ref}>
      {shadowRoot && ReactDOM.createPortal(children, shadowRoot)}
    </div>
  );
};