Browser Support
Stencil builds Web Components that run natively or near-natively in all widely used desktop and mobile browsers.
Web Components are a set of standardized browser APIs centered around the Custom Elements v1 spec, a cross-browser way to define and create essentially new HTML tags, and is the successor to the now-defunct v0 spec.
Custom Elements are natively supported in Chrome, Edge, Firefox, and Safari (including iOS)!
For browsers without native support, a small polyfill helps developers use Custom Elements seamlessly and with little performance overhead.
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.
| Chrome 79+ | Safari 14+ | Firefox 70+ | Edge 79+ | Edge 16-18 | IE 11 | |
|---|---|---|---|---|---|---|
| CSS Variables | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ |
| Custom Elements | ✅ | ✅ | ✅ | ✅ | ⚠️ | ⚠️ |
| Shadow Dom | ✅ | ✅ | ✅ | ✅ | ⚠️ | ⚠️ |
| es2017 | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ |
| ES Modules | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ |
As of Stencil v3, legacy browser support is deprecated, and will be removed in a future major version of Stencil.