Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Lightning-fast templates & Web Components: lit-html & LitElement

Today we're excited to announce the first stable releases of our two next-generation web
development libraries: lit-html and
LitElement.

lit-html is a tiny, fast, expressive library for HTML templating. LitElement is a simple base
class for creating Web Components with lit-html templates.

If you've been following the projects, you probably know what lit-html and LitElement are all
about (and you can skip to the end if you like). If you're new to lit-html and
LitElement, read on for an overview.

lit-html: a tiny, fast library for HTML templating

lit-html is a tiny (just over 3k bundled, minified, and gzipped) and fast JavaScript library for
HTML templating. lit-html works well with functional programming approaches, letting you express
your application's UI declaratively, as a function of its state.

Efficient. lit-html is lightning fast. When data changes, lit-html doesn't need to do any
diffing; instead, it remembers where you inserted expressions in your template and only
updates these dynamic parts.

Expressive. lit-html gives you the full power of JavaScript, declarative UI, and
functional programming patterns. The expressions in a lit-html template are just JavaScript,
so you don't need to learn a custom syntax and you have all the expressiveness of the language
at your disposal. lit-html supports many kinds of values natively: strings, DOM nodes, arrays
and more. Templates themselves are values that can be computed, passed to and from functions,
and nested.

Extensible: lit-html is also customizable and extensible—your very own template
construction kit. Directives customize how values are handled, allowing for asynchronous
values, efficient keyed-repeats, error boundaries, and more. lit-html includes several
ready-to-use directives and makes it easy to define your own.

A number of libraries and projects have already incorporated lit-html. You can find a list of some
of these libraries in the awesome-lit-html repo
on GitHub.

If templating is all you need, you can get started now with the
lit-html docs. If you'd like to build components to use
in your app or share with your team, read on to learn more.

LitElement: a lightweight Web Component base class

LitElement is a lightweight base class that makes it easier than ever to build and share Web
Components.

LitElement uses lit-html to render components and adds APIs to declare reactive properties and
attributes. Elements update automatically when their properties change. And they update fast,
without diffing.

This creates an element you can use anywhere you'd use a regular HTML element:

<name-tag name="Ida"></name-tag>

If you use Web Components already, you'll be happy to hear that they're now natively supported in
Chrome, Safari and Firefox. Edge support is coming soon, and polyfills are only needed for legacy
browser versions.

If you're new to Web Components, you should give them a try! Web Components let you extend HTML in
a way that interoperates with other libraries, tools, and frameworks. This makes them ideal for
sharing UI elements within a large organization, publishing components for use anywhere on the web,
or building UI design systems like Material Design.