HTML Web Component with support for SSR

my-element.js

// @ts-check

import { WebComponent } from "./utils.js";

const tagName = "my-element";

const template = /*html*/ `
<span>
Hello, <span id="name">World</span>!
</span>
<br>
<input type="text" id="input" placeholder="Type your name">
<button id="button">Submit</button>
`;

const styles = /*css*/ `
:host {
    display: block;
    font-family: sans-serif;
    padding: 1em;
    border: 1px solid black;
    border-radius: 5px;
}
#name {
    color: blue;
}
`;

class MyElement extends WebComponent {
  static get observedAttributes() {
    return ["name"];
  }

  get _name() {
    return this.getAttribute("name");
  }

  _updateName() {
    const name =
      /** @type HTMLDivElement */
      (this.root.getElementById("name"));
    name.textContent = this._name;
  }

  /**
   * @param {string} name
   * @param {string | null} oldValue
   * @param {string | null} newValue
   */
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "name" && oldValue !== newValue) {
      this._updateName();
    }
  }

  constructor() {
    super(template, styles);

    const input =
      /** @type HTMLInputElement */
      (this.root.getElementById("input"));
    const name =
      /** @type HTMLDivElement */
      (this.root.getElementById("name"));
    const button =
      /** @type HTMLButtonElement */
      (this.root.getElementById("button"));

    button.addEventListener("click", () => {
      this.setAttribute("name", input.value);
    });
  }
}

if (!customElements.get(tagName)) {
  customElements.define(tagName, MyElement);
}

export { MyElement, tagName, template, styles };

utils.js

// @ts-check

export class WebComponent extends HTMLElement {
  get internals() {
    if (HTMLElement.prototype.hasOwnProperty("attachInternals")) {
      return this.attachInternals();
    } else {
      return undefined;
    }
  }

  /**
   * @type {ShadowRootMode}
   */
  get shadowRootMode() {
    return "open";
  }

  /**
   * @param {string} template
   * @param {string} styles
   */
  constructor(template, styles) {
    super();
    this.template = template;
    this.styles = styles;

    let shadow = this.internals?.shadowRoot;

    if (!shadow) {
      shadow = this.attachShadow({
        mode: this.shadowRootMode,
      });
      shadow.innerHTML = template;
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(styles);
      shadow.adoptedStyleSheets = [sheet];
    }

    this.root = shadow;
  }

  prerender() {
    const t = document.createElement("template");
    t.setAttribute("shadowrootmode", this.shadowRootMode);
    t.innerHTML = this.template;
    const s = document.createElement("style");
    s.innerHTML = this.styles;
    t.appendChild(s);
    if (this.firstChild) {
      this.insertBefore(t, this.firstChild);
    } else {
      this.appendChild(t);
    }
  }
}