Web Component Examples - Include A Template Inline
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));
}
},
);
HTML
<my-widget></my-widget>
Output