Web components for inline importing HTML and SVG files

import-base.js

export class ImportBase extends HTMLElement {
  static observedAttributes = ["src"];

  async attributeChangedCallback(_1, _2, src) {
    const response = await fetch(src);

    if (response.ok) {
      this.setHTMLUnsafe(await response.text());
      this.onBeforeReplace();
      this.replaceWith(...this.children);
    }
  }

  onBeforeReplace() {}
}

import-html.js

import { ImportBase } from "./import-base.js";

class ImportHtml extends ImportBase {
  onBeforeReplace() {
    const scripts = this.querySelectorAll("script");

    for (const script of scripts) {
      const scriptClone = document.createElement("script");

      for (const { name, value } of script.attributes) {
        scriptClone.setAttribute(name, value);
      }

      scriptClone.textContent = script.textContent;
      script.replaceWith(scriptClone);
    }
  }
}

customElements.define("import-html", ImportHtml);

import-svg.js

import { ImportBase } from "./import-base.js";

class ImportSvg extends ImportBase {
  onBeforeReplace() {
    const svgElement = this.firstElementChild;

    for (const { name, value } of this.attributes) {
      svgElement.setAttribute(name, value);
    }

    svgElement.removeAttribute("src");
  }
}

customElements.define("import-svg", ImportSvg);