使用什么框架来构建 Web 组件：lit-element vs stencil vs SkateJS？

Question

I want to start leveraging http://webcomponents.me W3C standard which is now supported by all major web browsers.

I researched the internet and so far I found following frameworks:

1. Stencil - Created by ionic. All ionic components use this framework/compiler in order to build native supported web components.

2. lit-element - Created by Google and is part of Polymer framework.

3. SkateJS - Don't know how is behind this but it is in top 3 popular web components framework.

Can someone give me advice or opinion which framework is best?

Answer 1

If you want to build:

• Fast
• Easy-to-debug
• Cross-browser
• Framework-agnostic

web components you could also consider using framework :

http://vanilla-js.com/

Answer 2

As I've been working with native vanilla JS web components for the past 4.5 years as my main subject, I would like to add my opinion as a seasoned web developer with almost 30 years of experience.

As with all development tooling, these tools share a common problem. Either they

• evolve - forcing you into an undesirable update loop, keeping you busy with stuff that's long-finished just to keep the tooling fresh and secure,
• or they just "die" - check SkateJS eg The last commit on that repo is now 3 years old and open issues from 2019 exist that haven't even been commented on. The latest release is from 2017!!

This is not only true for authoring tools like the three suggestions you mentioned - this is also true for the whole build stack tooling .

Last year I took a dive to see what kind of modern build tools would be nice to work with for authoring web component libs. When doing the research, I stumbled upon Snowpack and Vite.js . We started out with Snowpack, but at the time it still seemed to have a number of stability issues, so we decided to switch to Vite.js. Last week I decided to give Snowpack another shot, only to find it deprecated in favor of Vite.js:

Stuff like this happens way too often, and while tooling should help you get stuff done faster and better, more often than not you find yourself dealing with the shortcomings of the tooling, incompatibilities with addons when updating the main library, security issues... rather than focussing on doing your business coding.

This is also true for popular tools like Storybook.

Once you start relying only on ECMAScript itself, and the browser API, you'll learn that most things like eg routing for SPAs are quite easy to develop yourself.

You probably won't need a build stack any more very soon. We have widespread support for HTTP/2, making bundling undesirable anyway, so just work with native ES modules . Not using a build tool and not bundling also has the huge benefit of not having to generate and rely on maps any more; let alone the fact that it immensely improves the development experience by keeping turnaround times in no-matter-how-complex projects in the ms realm. Code-you-write-is-code-that-runs - how amazing is that? No third-party-black boxes when your debugging leads you into code that would take you years to understand.

Instead of CSS preprocessors, work with native CSS and custom properties - native CSS nesting is coming to browsers as well .

To go fully build-less, there's unfortunately still some bits and pieces missing, but those are in progress. The most important ones are:

• CSS Module Scripts
• HTML modules
• JSON modules (Stage 3)

Some libraries are already picking up on this, eg ficus.js .