Skip to content

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

Notifications You must be signed in to change notification settings

trentmwillis/html-template-es-modules

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published