Information

Efficient

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.

Expressive

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.

Extensible

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.

Example of HTML Template using lit-html

...

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

			div {
				display: ${this.foo}; // 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;
			}
		</style>

		/* 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 */

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

...