RFC: Stencil vs. Lit

[gfellerph]

Following the question what type of storybook we should upgrade to, a discussion about component frameworks/bundlers emerged.

Considerations:

1. This blog post, listing some detailed arguments for migrating Shoelace to Lit: https://www.abeautifulsite.net/posts/moving-from-stencil-to-lit-element/

• lazy loading can cause hard to fix bugs
• stale issues are getting auto-closed after 30 days (bug: I cannot call custom Stencil Events in Angular 15 projects ionic-team/stencil#4291)
• Stencil builds are hard to customize, Lit uses standard es modules (but using web components with other frameworks has some minor pitfalls still, see https://shoelace.style/frameworks/angular and https://shoelace.style/frameworks/vue). Settings on implementation side are necessary when working with plain web-components

2. Less detailed but more recent article: https://www.phase2technology.com/blog/web-components-our-journey-from-lit-to-stencil-and-back-again
3. Descision making process by AXA (some arguments pro Lit, Stencil was not evaluated however) https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/FOUNDATION.md
4. Lit Element does not support Framework wrappers (a react wrapper is experimental https://lit.dev/docs/frameworks/react/)
5. The internet header is implemented with stencil and would be hard to migrate
6. Experimental implementation of Storybook 7 and Lit Elements with the <post-icon> component https://github.com/swisspost/design-system/tree/experimental-lit
7. Stencil JS uses automatic lazy loading for components. This ensures that only components that are being used are actually loaded. On the downside, the hard to control asynchronity can lead to hard to fix timing issues (see article in 1.)
8. Lit does not support lazy loading out of the box. Components can be loaded in a bundle or one by one. Lazy loading could be implemented on top of it if necessary with a custom implementation.
9. Subjectively, Lit is a cleaner, lighter more standards based approach while stencil despite having some pitfalls provides the potential for smoother integration with other frameworks. Lit seems more popular in the community than stencil
10. This announcement on twitter https://ionic.io/blog/announcing-stencil-v4-0-0
11. Using react for storybook (because the docs are best and tsx is close to stencils syntax) is a technology shift that comes at a price (custom transform functions for react properties like className etc.). When switching to lit, the web-component framework can be used to build stories which is based on lit. Using the same technology for components and stories would be a benefit for maintenance.

[gfellerph]

Temporary resolution:

• Pick the web-component framework for building storybook (uses lit to write stories and reserves the possibility to seamlessly switch to lit for components as well)
• Stick with Stencil until integration in Angular and React is really smooth for lit

[imagoiq]

By the way, I think the issue about CUSTOM_SCHEMA that we discussed is linked to this ticket angular/angular#12045 (if you want to subscribe).

[imagoiq]

I discovered that Lit has a discord server, here are some interesting discussions about Angular wrapper:

https://github.com/chihab/elemnt is not really maintained, but it's interesting to see the process.