DOM elements in iframe portal are instantiated from top Window.Node instead of the iframe Window.Node
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 36.1k
- Forks
- 1.1k
- Avg merge
- 9h 18m
- Merged PRs (30d)
- 195
Description
Describe the bug
I'm trying to render SolidJS components inside of an iframe using a Portal. The rendering works, but it seems the DOM elements get created from the parent document instead of the iframe document.
import { createSignal, Show, type Component } from 'solid-js';
import styles from './App.module.css';
import { Portal } from 'solid-js/web';
const IFrame = () => {
// Track the iframe contentDocument
const [iframeDocument, setIframeDocument] = createSignal<Document | null>(
null
);
// Signal to track results
const [stats, setStats] = createSignal<{
fromTop?: boolean;
fromiFrame?: boolean;
}>({});
// Track the iframe contentDocument in a signal once it has loaded
const onLoad = (e: Event) => {
const { contentDocument } = e.target as HTMLIFrameElement;
setIframeDocument(contentDocument);
};
const divRef = (ref: HTMLDivElement) => {
setStats({
// I don't want this to be true
fromTop: ref instanceof window.Node,
// I want this to be true
fromiFrame: ref instanceof iframeDocument()!.defaultView!.Node,
});
};
return (
<iframe srcdoc={`<!DOCTYPE html>`} onLoad={onLoad}>
<Show when={iframeDocument()?.body}>
<Portal mount={iframeDocument()?.body}>
<div ref={divRef}>
This div is inside an iframe. I want the DOM element to be
instanticated from the iframe document, but it seems to be
instantiated from the parent document.
</div>
<br />
<div>
Instantiated from parent: {String(stats().fromTop)}
<br />
Instantiated from iframe: {String(stats().fromiFrame)}
</div>
</Portal>
</Show>
</iframe>
);
};
const App: Component = () => {
return (
<div class={styles.App}>
<IFrame />
</div>
);
};
export default App;
Your Example Website or App
https://stackblitz.com/edit/solidjs-iframe-issue?file=src%2FApp.tsx
Steps to Reproduce the Bug or Issue
Render an iframe with children in a Portal. Inspect any children rendered in the Portal. They are instances of window.Node instead of contentDocument.defaultView.Node
Expected behavior
I would expect there to be a way to render child elements in an iframe that would use the contentDocument for creating DOM elements.
Platform
- OS: MacOS
- Browser: Chrome
- Version: 1.7.6
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Portal rendering path and reproduce the iframe example from the linked StackBlitz app. Trace how elements are created when Portal mounts into contentDocument.body, then verify that the rendered elements satisfy the iframe window's Node checks and that the existing parent-window behavior is not incorrectly used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100