Detached event

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>Creating a new object in a detached realm</title>

<script>
'use strict';

(async function() {
  await new Promise((resolve) => {
    window.addEventListener('load', resolve);
  });

  const frame = document.createElement('iframe');

  frame.srcdoc = `<script>
    window.parent.innerEventTarget = new EventTarget();
    window.parent.ChildEventTarget = EventTarget;
    window.parent.ChildEvent = Event;
    
    window.parent.innerEvent = new Event('event');
    window.parent.innerEvent.info = 'child Event created inside';
  <\/script>`

  await new Promise((resolve) => {
    frame.addEventListener('load', resolve);
    document.body.appendChild(frame);
  });

  console.log('Child frame loaded. Starting test...');

  function listener(e) {
  	console.log(e.info);
  }
  
  const childEventTarget = new window.ChildEventTarget();

  childEventTarget.addEventListener('event', listener);
  window.innerEventTarget.addEventListener('event', listener);

  frame.remove();
  
  console.log('Child frame loaded and then removed. Starting to dispatch events...');

	const outerEvent = new Event('event');
  outerEvent.info = 'outerEvent';
  childEventTarget.dispatchEvent(outerEvent);
  window.innerEventTarget.dispatchEvent(outerEvent);

	const childEvent = new Event('event');
  outerEvent.info = 'child Event created outside';
  childEventTarget.dispatchEvent(childEvent);
  window.innerEventTarget.dispatchEvent(childEvent);
  
  childEventTarget.dispatchEvent(window.innerEvent);
  window.innerEventTarget.dispatchEvent(window.innerEvent);
})();
 
</script>