Elements in PopUp window

by WebComponents

HTML

<h2>
  Popup windows with Custom Elements
</h2>
Each window has its own DOM and its own customElements Registry, thus require a define in every registry.. 
<p>

</p>Note the reference to <b>root.HTMLElement</b> to reference the correct DOM
<hr>

<script>
  function defineElement(root = window) {
    root.customElements.define('my-element', class extends root.HTMLElement {
      connectedCallback() {
        this.innerHTML = this.nodeName + ' defined; location: ' + root.location;
        console.log(root)
      }
    })
  }

  defineElement();// define my-element in main DOM

  function popup() {
    const popup = window.open('', '_blank', 'width=500,height=200');
    popup.document.body.innerHTML = `<my-element>undefined in popup</my-element>`;
    defineElement(popup);
  }

</script>
<my-element></my-element>
<p>
<button onclick="popup()">
  Create Popup with Custom Element content
</button>

CSS

body{
  font-family: Arial;
}