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).

Github

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

LWC

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.

• Github: https://github.com/salesforce/lwc
• Twitter: https://twitter.com/SalesforceEng
• Youtube: https://www.youtube.com/c/SalesforceDevelopers
• Project Website: https://lwc.dev/

Stencil

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.

• Github: https://github.com/ionic-team/stencil
• Twitter: https://twitter.com/stenciljs
• Slack: https://stencil-worldwide.herokuapp.com/
• Youtube: https://www.youtube.com/c/Ionicframework/
• Project Website: https://stenciljs.com/

Lit

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

• Github: https://github.com/lit/lit
• Twitter: https://twitter.com/buildWithLit
• Slack: https://lit.dev/slack-invite/
• Youtube: https://www.youtube.com/channel/UCok4ZKSzM3jY7JQRMlF-DPg
• Project Website: https://lit.dev/

Conclusions

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.