Web Components Example : Use Slots With An Inline Template

JavaScript

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