An efficient, simply expressive, extensible HTML templating library written JavaScript

lit-html allows you write HTML templates in JavaScript using string templates, then efficiently render/re-render templates along with data to create and update DOM.

lit-html is not a framework; it does include a web component model. It completes one task and only one; efficiently creating/updating DOM. It can be used standalone for small tasks, or you can combine it with a framework or component model for a full-featured UI development platform.

Compatible with all major web browsers, including IE11.

html`<abc-xyz att="{}" .prop="{}" @click="${this.event.bind(this)}">${ ? + '!' : 123}</abc-xyz>`


lit-html is extremely fast. It uses fast platform features like HTML <template> elements with native cloning.

Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn’t re-render the entire view.


lit-html gives you the full power of JavaScript and functional programming patterns.

Templates are values that can be computed, passed to and from functions and nested. Expressions are real JavaScript and can include anything you need.

lit-html supports many kind of values natively: strings, DOM nodes, heterogeneous lists, nested templates and more.


lit-html is extremely customizable and extensible. Directives customize how values are handled, allowing for asynchronous values, efficient keyed-repeats, error boundaries, and more. lit-html is like your very own template construction kit.

Visit lit-html Guide

Want to know more about the templating language used in Custom Web Component? You can search online with 'javascript string template' or visit the lit-html project directly.

The lit-html project has some good explinations on the web standard string templates, how to use them and how they mix this with the way in which they bind it to the HTML and the DOM.


Mozilla have a good section on javascript string templates / template literals. they explain how they are used and the syntax that can be applied.


Here you will find posts on using ES6 template strings and what you can do with them.

Example of HTML Template using lit-html


static template() {
	return html`
			/* Style auto encapsulates in shadowDOM or shims for IE */
			/* Alter the web component */
			:host { display: block; }
			/* Alter internal to the template */

			div {
				display: ${}; // beware of antipatterns!
				padding: 20px;
				color: #222;
				background: #f5f2f0;
				border: 1px solid #ccc;
				border-radius: 3px;

			button {
				border: none;
				background: #444;
				color: white;
				padding: 10px;

		/* Use HTL slots to render template from the host inside the template. */
		/* Stuff between an elements tags, will render in an unnamed slot */
		/* Stuff applied to a slot name, will render in the slot with that name */

		/* When accessing properties, prefix with 'this.' to set scope */
		/* When adding a deferrred method to an event, bind it to 'this' so we have scope in the method */

		/* prefix html attribute with . to set a property */
		/* prefix html attribute with ? to dd or remove it base on conditional */
		/* prefix html attribute with @ to set an event, bind the method to 'this' to keep scope */
		/* dont prefix html attribute to set attribute */

			<slot name="main">Default text if no slot for main</slot>
			<br />
			<strong>FOO:</strong> ${}
			<br />
			<strong>BAR:</strong> ${}
			<br />
			<slot name="footer">Default text if no slot for footer</slot>
			<button .property="${}" attribute="${}" ?attribute="${this.conditional}" @click="${this._clicked.bind(this, 'something')}">Boo</button>