Web Components Example: Use A Template In The HTML

JavaScript

customElements.define(
  "my-widget",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("my-template");
      let templateContent = template.content;
      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);

Output

<template id="my-template">
  <div>This is from the template</div>
</template>

<my-widget></my-widget>
<my-widget></my-widget>
<my-widget></my-widget>

HTML