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.

Copy link

lijunle commented Dec 14, 2017

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

@jjenzz

This comment has been minimized.

Copy link

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 🙂

@LucyZlu

This comment has been minimized.

Copy link

LucyZlu commented Sep 7, 2018

how can I insert two <link> into iframeHead? React only accept one child element?

@Kexin-Li

This comment has been minimized.

Copy link

Kexin-Li commented Jan 4, 2019

It's helpful! thanks.

@o-t-w

This comment has been minimized.

Copy link

o-t-w commented Jan 13, 2019

How do you add styles into the shadow DOM example?

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