Lit - Web Component Framework Developed by Google

Lit Google web component

Today I will write this article about Lit web component framework developed by google. It seems that lit is a re-branding of a polymer and it reminds like Aurelia.

What is Lit?

Lit is a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

The first thing to know about Lit is that every Lit component is a standard web component. Web components have the superpower of interoperability: natively supported by browsers, web components can be used in any HTML environment, with any framework or none at all.

This makes Lit an ideal choice for developing shareable components or design systems. Lit components can be used across multiple apps and sites, even if those apps and sites are built on a variety of front-end stacks. Site developers using Lit components don’t need to write or even see any Lit code; they can just use the components the same way they do built-in HTML elements.

Lit is also perfect for progressively enhancing basic HTML sites. Browsers will recognize Lit components in your markup and initialize them automatically–whether your site is handcrafted, managed via a CMS, built with a server-side framework, or generated by a tool like Jekyll or eleventy.

Of course, you can also build highly interactive, feature-rich apps out of Lit components, just as you would with a framework like React or Vue. Lit’s capabilities and developer experience are comparable to these popular alternatives, but Lit minimizes lock-in, maximizes flexibility and promotes maintainability by embracing the browser’s native component model.

When you build an app with Lit, it’s easy to sprinkle in “vanilla” web components, or web components built with other libraries. You can even update to a major new version of Lit–or migrate to another library–one component at a time, without disrupting product development.

Each Lit component is a self-contained unit of UI, assembled from smaller building blocks: standard HTML elements and other web components. In turn, each Lit component is itself a building block that can be used–within an HTML document, another web component, or a framework component–to build larger and more complex interfaces.

How to install Lit

Install the lit package from npm:

npm i lit

How it works?

I made a simple fruit list example with Typescript and Lit. Full code example: Lit Playground.


/* fruit-list.ts */
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('fruit-list')
class FruitList extends LitElement {

  @property() fruit = ['Apple', 'Orange', 'Banana'];

   render() {
     return html`Fruit list: ${this.fruit.join(', ')}`;
   }
}

See the Lit documentation: https://lit.dev/docs/getting-started

I really hope this doesn’t happen like a polymer project.



If you like this blog post and it was useful to you, please follow us on Twitter and Facebook.



Related articles

Post a Comment

0 Comments