update-prompt-automatic.html

<template id="update-prompt-automatic">
  <style>
    @import "css/style.css";
  </style>

  <p>An update is available. Would you like to install the latest version?</p>
  <button id="confirm-update" class="btn-success" type="button">Update</button>
  <button id="cancel-update" type="button">Close</button>
</template>

<script type="module">
  (function () {
    const template = document.querySelector("#update-prompt-automatic");

    customElements.define(
      "update-prompt-automatic",
      class extends HTMLElement {
        connectedCallback() {
          this.attachShadow({ mode: "open" }).appendChild(
            template.content.cloneNode(true)
          );

          this.shadowRoot
            .getElementById("cancel-update")
            .addEventListener("click", () => {
              this.dispatchEvent(
                new CustomEvent("update-prompt-canceled", {
                  bubbles: true,
                  composed: true,
                })
              );
            });

          this.shadowRoot
            .getElementById("confirm-update")
            .addEventListener("click", () => {
              this.dispatchEvent(
                new CustomEvent("update-prompt-confirmed", {
                  bubbles: true,
                  composed: true,
                })
              );
            });
        }
      }
    );
  })();
</script>