error-dialog.html

<template id="error-dialog-template">
  <style>
    @import "css/style.css";

    #details {
      padding: 0.5rem;
      max-height: 50vh;
      overflow: auto;
      opacity: 0.7;
      border: 1px solid black;
      background-color: white;
      text-align: left;
      font-size: 0.8em;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }

    .details-label {
      color: var(--brand-red);
      font-weight: 600;
      text-align: left;
      font-size: 0.9em;
      margin: 0.25rem 0.4rem;
    }
  </style>

  <h3 id="title"></h3>
  <p id="message"></p>
  <div id="details-container">
    <div class="details-label">Details:</div>
    <pre id="details" class="monospace"></pre>
  </div>
  <button id="close">Close</button>
</template>

<script>
  (function () {
    const doc = (document._currentScript || document.currentScript)
      .ownerDocument;
    const template = doc.querySelector("#error-dialog-template");

    customElements.define(
      "error-dialog",
      class extends HTMLElement {
        DEFAULT_MESSAGE = "Please refresh the page and try again.";

        connectedCallback() {
          this.attachShadow({ mode: "open" });
          this.shadowRoot.appendChild(template.content.cloneNode(true));
          this.close = this.close.bind(this);
          this.shadowRoot
            .getElementById("close")
            .addEventListener("click", this.close);
        }

        /**
         * @param title   A concise summary of the error.
         * @param message (string, optional) A user-friendly and helpful message
         *                that ideally gives the user some guidance what to do
         *                now. Defaults to a generic `DEFAULT_MESSAGE`.
         * @param details (string|Error, optional) The technical error details,
         *                e.g. the original error message from the API or
         *                library call.
         */
        setup({ title, message = this.DEFAULT_MESSAGE, details = "" }) {
          this.shadowRoot.getElementById("title").innerText = title;
          this.shadowRoot.getElementById("message").innerText = message;
          this.shadowRoot.getElementById("details").innerText = details;
          this.shadowRoot.getElementById(
            "details-container"
          ).style.display = details ? "block" : "none";
        }

        close() {
          this.dispatchEvent(
            new CustomEvent("dialog-closed", {
              bubbles: true,
              composed: true,
            })
          );
        }
      }
    );
  })();
</script>