Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use React portals to render inside shadow dom and iframes
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>
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>
@lijunle

This comment has been minimized.

Show comment
Hide comment
@lijunle

lijunle Dec 14, 2017

Should I use state instead of class variables to be react-style?

lijunle commented Dec 14, 2017

Should I use state instead of class variables to be react-style?

@jjenzz

This comment has been minimized.

Show comment
Hide comment
@jjenzz

jjenzz Apr 11, 2018

I'm trying this in Firefox 59.0.2 and the content appears for a split second and then disappears: https://codesandbox.io/s/4j72vl564x

Does anyone know how to solve this?

UPDATE: Fixed https://codesandbox.io/s/4lr7oxxrl7 🙂

jjenzz commented Apr 11, 2018

I'm trying this in Firefox 59.0.2 and the content appears for a split second and then disappears: https://codesandbox.io/s/4j72vl564x

Does anyone know how to solve this?

UPDATE: Fixed https://codesandbox.io/s/4lr7oxxrl7 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment