<template>-element-loader

A webpack loader that lets you consume your HTML contents as actual <template> elements.

Why?

It allows preprocessing of the contents of your template to speed up subsequent rendering when needed by saving CPU cycles on HTML parsing.

It's only relevant at all if you reuse that template multiple times; harmless otherwise.

How-to

Usage example:

• webpack.config.js:

rules: [{
  test: /\.template\.html$/,
  use: {
    loader: 'template-element-loader',
    options: {
      removeComments: true, // or any of the HTMLMinifier options
    },
  },
}]

• my-component.template.html:

<div>
    <h2>Buttered Toast Recipe</h2>
    <ol type="I">
        <li>Choose your bread and place it in the toaster.</li>
        <li>Choose the toaster setting and set it off.</li>
        <li>Remove the toast.</li>
        <li>Butter your toast.</li>
    </ol>
</div>

• my-component.controller.ts:

import template from './my-component.template.html';

class MyElement extends HTMLElement {

  constructor() {
    super()
      .attachShadow({ mode: 'closed' })
      .appendChild(template.content.cloneNode(true));
  }

}

Options

This loader additionally minifies your HTML content using HTMLMinifier.
You can refer to their Options Quick Reference table for guidance.

TypeScript typings

If your project uses TypeScript, we recommend you include something like the excerpt below to you typings:

• declarations.d.ts:

declare module '*.html' {
  const template: HTMLTemplateElement;
  export default template;
}

Licensing

Uses the MIT license.

See LICENSE for the complete text or the MIT entry on TLDR Legal for a quick summary.