Bit speeds modular app development with components, makes it easier to maintain your codebase (e.g. gradual refactoring with full control), helps increase test-coverage and boost code reusability while allowing evolution.

2. lit-html and lit-element

Lit-html is basically a customizable construction kit for web components. It’s “An efficient, expressive, extensible HTML templating library for JavaScript”. Meaning, Lit-html uses JavaScript template strings to create dynamic templates with template literals (example).

lit-html uses fast platform features like HTML <template> elements with native cloning to boost efficiency, and only ever updates the parts of templates that actually change — it doesn’t re-render the entire view. That’s pretty fast.

Templates are values ( strings, DOM nodes, heterogeneous lists, nested templates etc) that can be computed, passed to and from functions and nested. Expressions are JavaScript and can include what’d needed.

Directives customize how values are handled, allowing for asynchronous values, efficient keyed-repeats, error boundaries, and more.

Lit-element is a “simple base class for creating fast, lightweight web components”. It uses lit-html to render into the element’s Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html .

As LitElement makes it easy to define Web Components for sharing elements across your organization or building a UI design system, it’s a very powerful combination with Bit- to easily create, reuse, manage and sync components. Bit’s platform will even visualize the components, so your bit collection is more than a set of reusable components- it’s a visual design system of components you can share, use and develop anywhere!

3. StencilJS

Intro to web components with StencilJS

Created by the Ionic team, Stencil is a “web Component compiler for building fast, reusable UI components and Progressive Web Apps”. Meaning, it’s a compiler for generating Web Components and progressive web apps (PWA).

It uses TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline, and lazy-loading to generate standards-based Web Components that run on modern and legacy browsers.

Stencil also unlocks new abilites capabilities for Web Components, such as Server Side Rendering without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings). Creating components is easy, as Stencil components are plain ES6/TypeScript classes with some decorator metadata. Take a look:

4. Svelte JS

Rich Harris talking about svelte and the future

Svelte is “a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM” when the state of your application changes. Meaning, you can build boiler-plate free components using CSS, HTML and pure JavaScript, and Svelt will compile it into small and lightweight JS with built-in reactivity.

Sounds mind-blowing and simple and the same time, right? Another useful ability is the built-in support for any framework agnostic CSS in JS library.

Svelte is a major step towards framework-agnostic web components, and it’s workflow enables gradual refactoring which is very useful in this aspect. Combing Svelete with Bit means having a toolbox of framework agnostic components you can easily use anywhere, and even build styling components to style other components, turning styling into a manner of composition.

5. Angular elements

Angular elements is a new package in Angular that helps us publish Angular components as custom elements. It does this by taking the Angular component and compiling it into a web component.

This prominent attempt to bridge the framework-agnostic gap from the framework’s end is very interesting, as the @angular/elements package exports a createCustomElement() API that provides a bridge from Angular's component interface and change detection to the built-in DOM API.

Practically, you can use the new createCustomElement() function to convert a component into a class and register it in the browser as a custom element. Then, you can use the new element just like a built-in HTML element in content that you add directly into the DOM. This adds new capabilities to your NG workflow, from better separation of concerns and reusability to SSR!

6. Hybrids

Hybrids is a “UI library for creating Web Components, which favors plain objects and pure functions over class and this syntax”. It provides simple and functional API for creating custom elements.

It provides a declarative way for creating custom elements. It is a mix of functional and object-oriented architecture with a unique approach for defining custom elements. Here’s an example which relays on three property-related ideas: descriptors, factories and translation. The library uses change detection and cache mechanism to simplify the lifecycle of the component.

import { define } from 'hybrids'; const MyElement = {

count: 0,

render: ({ count }) => {...},

}; define('my-element', MyElement);

“Bonus” features include a template engine based on tagged template literals and hot module replacement support for faster development. Neat.

7. Sigil

Sigil is a “functional web component library”. It features reusable html elements using web components, a virtual dom for super fast re-rendering using snabbadom, html templating language that allows bindings to attributes & properties with powerful expressions, pure functional view component style to reduce re-renderings,support for immutable flux based stores like Redux and Kamea and more.Try it out for yourself with JSFiddle here.

Honorable mentions (suggest more in the comments):