A Vite plugin to import HTML files as HTMLTemplateElement
npm install vite-plugin-html-template-elementA Vite plugin to import HTML (*.tpl) files as HTMLTemplateElement.
``bash`
npm install vite-plugin-html-template-element
Add the plugin to your Vite configuration:
`typescript
import { defineConfig } from "vite";
import htmlTemplateElementPlugin from "vite-plugin-html-template-element";
export default defineConfig({
plugins: [htmlTemplateElementPlugin()],
});
`
Then you can import HTML files as templates:
`typescript
import myTemplate from "./my-template.tpl";
customElements.define(
"my-custom-element",
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(myTemplate.content.cloneNode(true));
}
}
);
`
Include the following declaration for typescript to recognize .tpl files.
`typescript``
declare module "*.tpl" {
const template: HTMLTemplateElement;
export default template;
}
MIT. This project is licensed under the MIT License - see the LICENSE file for details.