Bug: Using custom elements with createPortal() in a documentPictureInPicture window is failing
Issue Details
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
- Create a documentPictureInPicture window
- Register custom element in new window
- 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.
Issue Details
Bug: Using custom elements with createPortal() in a documentPictureInPicture window is failing
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
- Create a documentPictureInPicture window
- Register custom element in new window
- 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.