Stencil v2.10

We’ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10! New features in v2.10 include greater control over the shadow DOM, a fix that results in fewer render cycles, and support for TypeScript 4.3. Let’s dive into each of these new improvements.

One of the biggest changes included in Stencil v2.10 is support for the delegatesFocus option on the shadow DOM in dist-custom-elements and dist-custom-elements-bundle. When this property is set to true and a non-focusable part of the shadow DOM is clicked, the first focusable part of the component is given focus and any relevant focus styling is applied to the component. You can enable this feature in the Component decorator like so:

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: { delegatesFocus: true } ,
})

In addition, we’ve also fixed an issue related to prop reflection that now runs fewer render cycles. Now, when you reflect props of type number, you save a render cycle!

Finally, we’ve also added support for TypeScript 4.3. For details on all of the TypeScript changes that are now supported, check out the TypeScript docs here. We’re really excited about all of these new improvements and, as always, we look forward to seeing what you build with Stencil. Happy coding! 😀

Sign up for the Ionic Newsletter to get the latest news and updates!