-
-
Save robertgonzales/b1966af8d2a428a8299663b92fb2fe03 to your computer and use it in GitHub Desktop.
| 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> |
how can I insert two <link> into iframeHead? React only accept one child element?
It's helpful! thanks.
How do you add styles into the shadow DOM example?
Add this.shadowRoot.appendChild(this.props.style) after attaching the shadow. Pass a style element as a prop.
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 🙂
I think get correct <body> node in <iframe> must be at the onLoad event
Thank you so much 🙂
Using React Hooks and createPortal:
https://codesandbox.io/s/iframe-demo-zd0b0
This one really helpful, Thanks
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 🙂I think get correct
<body>node in<iframe>must be at theonLoadeventThank you so much 🙂
This worked for me as well, thanks!
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>
);
};
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 🙂