DOM elements in iframe portal are instantiated from top Window.Node instead of the iframe Window.Node #2358

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;