Introducing ReactDOM unstable_createSandboxedPortal

packages/react-dom/src/client/ReactDOM.js

@@ -1126,7 +1126,20 @@ function createPortal(
     'Target container is not a DOM element.',
   );
   // TODO: pass ReactDOM portal implementation as third argument
-  return ReactPortal.createPortal(children, container, null, key);
+  return ReactPortal.createPortal(children, container, null, key, false);
+}
+
+function createSandboxedPortal(
+  children: ReactNodeList,
+  container: DOMContainer,
+  key: ?string = null,
+) {
+  invariant(
+    isValidContainer(container),
+    'Target container is not a DOM element.',
+  );
+  // TODO: pass ReactDOM portal implementation as third argument
+  return ReactPortal.createPortal(children, container, null, key, true);
 }
 
 const ReactDOM: Object = {
@@ -1291,6 +1304,8 @@ const ReactDOM: Object = {
     return createPortal(...args);
   },
 
+  unstable_createSandboxedPortal: createSandboxedPortal,
+
   unstable_batchedUpdates: ReactGenericBatching.batchedUpdates,
 
   unstable_deferredUpdates: DOMRenderer.deferredUpdates,

packages/react-reconciler/src/ReactFiber.js

@@ -453,6 +453,7 @@ export function createFiberFromPortal(
     containerInfo: portal.containerInfo,
     pendingChildren: null, // Used by persistent updates
     implementation: portal.implementation,
+    sandbox: portal.sandbox,
   };
   return fiber;
 }

packages/shared/ReactPortal.js

@@ -17,13 +17,15 @@ export function createPortal(
   // TODO: figure out the API for cross-renderer implementation.
   implementation: any,
   key: ?string = null,
+  sandbox: ?boolean = false,
 ): ReactPortal {
   return {
     // This tag allow us to uniquely identify this as a React Portal
     $$typeof: REACT_PORTAL_TYPE,
     key: key == null ? null : '' + key,
     children,
     containerInfo,
+    sandbox,
     implementation,
   };
 }

packages/shared/ReactTreeTraversal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {HostComponent} from './ReactTypeOfWork';
+import {HostComponent, HostPortal} from './ReactTypeOfWork';
 
 function getParent(inst) {
   do {
@@ -15,6 +15,9 @@ function getParent(inst) {
     // events to their parent. We could also go through parentNode on the
     // host node but that wouldn't work for React Native and doesn't let us
     // do the portal feature.
+    if (inst && inst.tag === HostPortal && inst.stateNode.sandbox) {
+      return null;
+    }
   } while (inst && inst.tag !== HostComponent);
   if (inst) {
     return inst;