Web Components: LWC, Stencil, and Lit by Numbers

Abimael Barea
Frontend Weekly
Published in
3 min readFeb 6, 2022

Big players in the web components ecosystem.

In a previous article, I went through the basis of Web Components. Now, I want to focus on different options to develop those components.

Native API

We cannot forget that the HTML Living Standard provides a mechanism to develop Web Components without adding any extra layer.

Check the definition and this example. Maybe your use case doesn’t require using some additional framework on top of the Standard.

Frameworks Analysis

There are multiple options out there to create and ship web components. For example, Angular has their one call it: Angular Elements; others like Svelte are also doing some advanced in these areas. But three ones focus on this purpose: LWC, Stencil, and Lit.

These are the numbers extracted (February 2022).


In the table below, we compare some information extracted from Github to understand the community impact and usage.

NPM Trends

Let’s analyze the interest in these frameworks over time using npm trends.

Last five years.

Last year.


Update:`lit` is a new package that we are gradually moving people over to. The main package to track is `lit-element` which contains the actual Lit 2 implementation.

Source Justin Fagnani from Lit Team: https://medium.com/@justin_82225/lit-is-a-new-package-that-we-are-gradually-moving-people-over-to-22a2595351f4

Last year.


Frameworks Details


Lightning Web Components is an open-source UI framework developed at Salesforce. You can use LWC to customize Salesforce, but you can also use LWC to build any web app.


Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.


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


As you can see, there are many options to develop your web components.

It’s essential to analyze and understand every project before making a decision. Some additional aspects to consider could be:

  • Programming language
  • Testing library
  • Accessibility
  • HMR — Hot Module Replacement
  • Bundle size

Remember that choosing the right technology for your use case is essential.