7 Stencil compiler
This chapter covers
- How Stencil simplifies creation of web components
- Stencil decorators
- Lifecycle methods
- Event handling
- Sharing state between Stencil web components
Stencil is both a library and compiler for building web applications with web components. It uses TypeScript (not plain JavaScript), CSS, JSX, and a virtual DOM (like React and Vue), and also requires Node.js.
Stencil matters most to developers who want a modern component authoring experience while still shipping standards-based web components that work across frameworks. You get familiar patterns like JSX, reactive props/state, lifecycle hooks, and strong build tooling, but the output is web components rather than framework-locked widgets.
That combination has made Stencil a popular choice. At the time of writing, it is the second most popular way to create web components, behind Lit.
The tradeoff is that Stencil provides a more full-featured approach to building web components, resulting in a steeper learning curve compared to more focused libraries. Also, its build process takes longer than that of many other libraries. But if you value the added features Stencil provides, the increased learning curve and build times may be worthwhile.
Before creating components with Stencil, it is helpful to understand what makes its approach different from the other web component libraries covered in this book. That’s where we begin our examination, digging deeper in Stencil.