Bug: Using custom elements with createPortal() in a documentPictureInPicture window is failing

#33783

Issue Details

19 days ago
No assignee
Status: Unconfirmed
derwebcoderderwebcoder
opened 19 days ago
Author

Trying to use a custom element with createPortal() in a new documentPictureInPicture window is failing with an error.

React version: 19.1.0

Steps To Reproduce

  1. Create a documentPictureInPicture window
  2. Register custom element in new window
  3. Render custom element in new window using createPortal()

Link to code example: https://codesandbox.io/p/sandbox/mystifying-mountain-h7gxtx

Note: I've created a similar sandbox but without react: https://codesandbox.io/p/sandbox/goofy-rumple-hk8lrs In this example there is a version that fails with the same error and a working solution (commented out):

// ⚠️ This fails with same error const square = pipWindow.document.createElement("custom-square"); // ✅ This is successful // const square = document.createElement("custom-square");

The current behavior

The custom element is not being created correctly and therefore not visible. The console in the documentPictureInPicture window shows the following error:

Uncaught NotSupportedError: Failed to execute 'createElement' on 'Document': The result must be in the same document at completeWork (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:11346:37) at runWithFiberInDEV (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:1519:30) at completeUnitOfWork (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:15268:19) at performUnitOfWork (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:15149:11) at workLoopSync (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:14956:41) at renderRootSync (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:14936:11) at performWorkOnRoot (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:14419:13) at performWorkOnRootViaSchedulerTask (https://h7gxtx.csb.app/node_modules/react-dom/cjs/react-dom-client.development.js:16216:7) at MessagePort.performWorkUntilDeadline (https://h7gxtx.csb.app/node_modules/scheduler/cjs/scheduler.development.js:45:48)

The expected behavior

The custom element being correctly created and rendered in the documentPictureInPicture window.