[Bug]: `use:*` Directives Use Elements Whose `ownerDocument` Differs from `window.document`

[ITenthusiasm]

Describe the bug

The element passed to a use:* directive has an ownerDocument that differs from the application's Document (i.e., window.document) even though the element belongs to the application's Document. This prevents directives like the following from working:

function listenersDirective(element: HTMLElement) {
  element.ownerDocument.addEventListener("click", handleClick);
  // ...

  onCleanup(() => {
    element.ownerDocument.removeEventListener("click", handleClick);
    // ...
  });
}

This discrepancy is problematic in certain types of Applications and NPM Packages related to the Web. It's not immediately clear what exactly element.ownerDocument is pointing to. It points to a Document, but it definitely doesn't point to window.document.

Your Example Website or App

https://playground.solidjs.com/anonymous/5ddfcd3c-103f-4283-aff6-6720325bfbd5

Steps to Reproduce the Bug or Issue

1. Create any valid Solid Directive
2. Compare the element.ownerDocument in the Solid Directive with the global window.document and find that the two are not referentially equivalent

The Solid.js Playground Link provided above exemplifies this problem.

Expected behavior

The HTMLElement passed to any given Solid Directive on the Web should have an ownerDocument that's [referentially] equivalent to the application's Document (i.e., window.document).

Platform

• OS: MacOS
• Browser: Chrome
• Version: 118.0

Additional context

This bug is not observable after the application has finished rendering. If you open the devtools and select the element that was given a directive, then element.ownerDocument === window.document will yield true in the console even though it yielded false during the call to the Solid Directive.