// a popover dialog NOT WORKING
class PopupInfo extends HTMLElement {
    constructor() {
      // Always call super first in constructor
      super();
    }
  
    connectedCallback() {
      // Create a shadow root
      const shadow = this.attachShadow({ mode: "open" });
  
      // Create spans
      const dialog = document.createElement("dialog");
      dialog.setAttribute("id", this.getAttribute("id"));
      dialog.setAttribute("popover","popover");
      const header = document.createElement("header");
      header.innerText="HEADE"
      const main = document.createElement("main");
      main.innerText="MAIN"
      const footer = document.createElement("footer");
      footer.innerText="WWW"
      dialog.appendChild(header);
      dialog.appendChild(main);
      dialog.appendChild(footer)
      // Attach the created elements to the shadow dom
      shadow.appendChild(dialog);
      
    }
  }
  
  // Define the new element
  customElements.define("popup-info", PopupInfo);