Define custom HTML element via iframe

HTML

<iframe
  srcdoc="
  <my-el></my-el>
  <script type='module'>
    customElements.define(
      'my-el',
      // Using the top's HTMLElement will fail the same
      class extends window.parent.HTMLElement {
        constructor() {
          try {
            super();
          }
          catch (err) { // So that we get to jsfiddle's console
            parent.postMessage(err, '*');
            throw err;
          }
        }
      }
    );
  </script>"
>
</iframe>

JavaScript

onmessage = e => {
  if (e.source === document.querySelector("iframe[srcdoc]")?.contentWindow)  
    console.error(e.data.message);
};

onload = e => {
  const frameWin = document.querySelector("iframe[srcdoc]").contentWindow;
  console.log("Same interfaces?", HTMLElement === frameWin.
  HTMLElement);
  console.log("body instanceof frame's HTMLElement?", document.body instanceof frameWin.
  HTMLElement);
};