trentmwillis / html-template-es-modules

A simple proof-of-concept for importing HTML Templates into ES Modules

HTML Template ES Modules

A simple, proof-of-concept for importing HTML files as HTML Templates into ES Modules. Made possible by using Service Workers to transparently transform HTML file responses into ES Modules that export an HTMLTemplateElement.

Example

Given hello-world.html:

<h1>Hello, world!</h1>
<p><em>Coming at you live, from an HTML Template imported as an ES Module!</em></p>

You can import it in hello-world.js like so:

import template from './hello-world.html';
console.log(template.toString()); // [object HTMLTemplateElement]

From there you can clone the template and insert it into the DOM! Or do whatever else you'd like with the element.

Running The Demo

To try out the demo, do the following:

• Clone the repo: git clone https://github.com/trentmwillis/html-template-es-modules.git
• Install dependencies in the repo: cd html-template-es-modules && npm install
• Run the server: npm run start