Web Component Examples - Include A Template Inline

October 2023

Not sure if this is a good idea or not, but the goal is to have not have to put the template on the page, just the call the to component

JavaScript

customElements.define(
  "my-widget",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.createElement("template");
      template.innerHTML = `<p>This is a new template</p>`
      let templateContent = template.content;
      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);

end of line