Stencil – The magical, reusable web component generator

October 7, 2017

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).

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.