Frontend Weekly
Published in

Frontend Weekly

Web Components: LWC, Stencil, and Lit by Numbers

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:

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.



It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store