Stencil is a tool for building modern Web Components. Stencil combines some of the best features from traditional frameworks but outputs 100% standards-compliant Custom Elements, part of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more powerful mobile and web apps. Stencil is the foundation for the next generation of Ionic Framework, but is completely independent of Ionic or any other UI framework.
It takes features such as
- Virtual DOM
- Async rendering (inspired by React Fiber)
- Reactive data-binding
- TypeScript
- JSX
and then generates standards-based Web Components with these features baked in.
Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components.
It also enables a number of key capabilities on top of Web Components, in particular, Server-Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
Compared to using Custom Elements directly, Stencil provides extra APIs that makes writing fast components simpler. APIs like Virtual DOM, JSX, and async rendering make fast, powerful components easy to create, while still maintaining 100% compatibility with Web Components.
The developer experience is also tuned and comes with live reload and a small dev server baked into the compiler.
Browser support
Web components, as of the V1 spec, are now cross-browser. They are natively supported in Chrome and Safari and are coming to both Edge and Firefox. Stencil uses a dynamic loader to load the custom elements polyfill only on browsers that need it.
With this polyfill, Stencil’s browser support is Chrome (and all chrome based browsers), Safari, Firefox, Edge, and IE11.
Sketch Syntax Highlighter Plugin