by Maximilian Schwarzmüller of academind
Web Components consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
- HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
Web Components @GitHub
UI Components | User Interface Application Building Components @Ionic (Stencil)
Stencil employs JSX, while lit-element has to use lit-html as it's templating language to render to the shadow DOM. The syntax is slightly different, but similar enough that it's not a huge barrier.
if you want something as close to the standard as possible, with no extra baggage — go for lit-element. If you don't want to setup testing, go through as much boilerplate, or develop a build process — use Stencil.
Web Components: LWC, Stencil, and Lit by Numbers | by Abimael Barea Puyana | Frontend Weekly | Medium