A few days ago, the team behind Ionic framework unveiled a new tech during the Polymer Summit 2017 conference: Stencil.js, a tool to produce web components based on standard APIs.

You can see the full length video of the presentation here (27min).

The what

Based on some ideas from Svelte, Stencil is not a framework, but a compiler taking in TSX files (which is basically JSX with TypeScript) and producing standard web components, usable with any framework like Angular, React, VueJS…

Here is what a Stencil component looks like:

Does it work everywhere?

The tool is shiny new and seems far from a stable release ( v0.0.2 at this time), but the next major version of Ionic ( v4.0 ) is planned to use it, so it may be production-ready soon enough.

As for the browser compatibility, it uses the standard technologies behind the name web components (HTML Templates, Custom Elements and Shadow DOM, HTML imports are not used). Based on this, we can expect it to work only on Chrome (along with other Chrome-based browsers) and Safari without using polyfills: