{"id":3906,"date":"2021-11-01T17:26:40","date_gmt":"2021-11-01T17:26:40","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3906"},"modified":"2023-01-21T00:31:33","modified_gmt":"2023-01-21T05:31:33","slug":"announcing-stencil-v2-10","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10","title":{"rendered":"Announcing Stencil v2.10"},"content":{"rendered":"<p>We\u2019ve 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\u2019s dive into each of these new improvements.<\/p>\n<p><!--more--><\/p>\n<p>One of the biggest changes included in Stencil v2.10 is support for the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ShadowRoot\/delegatesFocus\"><code>delegatesFocus<\/code> option<\/a> on the shadow DOM in <code>dist-custom-elements<\/code> and <code>dist-custom-elements-bundle<\/code>. When this property is set to <code>true<\/code> 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 <code>Component<\/code> decorator like so:<\/p>\n<pre><code class=\"language-jsx\">@Component({\n  tag: &#039;my-component&#039;,\n  styleUrl: &#039;my-component.css&#039;,\n  shadow: { delegatesFocus: true } ,\n})\n<\/code><\/pre>\n<p>In addition, we\u2019ve also fixed an issue related to prop reflection that now runs fewer render cycles. Now, when you reflect props of type <code>number<\/code>, you save a render cycle!<\/p>\n<p>Finally, we\u2019ve also added support for TypeScript 4.3. For details on all of the TypeScript changes that are now supported, check out the <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/release-notes\/typescript-4-3.html\">TypeScript docs here<\/a>. We\u2019re really excited about all of these new improvements and, as always, we look forward to seeing what you build with Stencil. <a href=\"https:\/\/github.com\/ionic-team\/stencil\/releases\/tag\/v2.10.0\">Happy coding!<\/a> \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve 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\u2019s dive into each of these new improvements.<\/p>\n","protected":false},"author":87,"featured_media":3905,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"535867","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/announcing-stencil-v2-10\/216861","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120,223],"tags":[76],"class_list":["post-3906","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","category-stencil","tag-stencil"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Stencil v2.10 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"We\u2019ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Stencil v2.10\" \/>\n<meta property=\"og:description\" content=\"We\u2019ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-01T17:26:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:31:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anthony Giuliano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@a__giuliano\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony Giuliano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"Announcing Stencil v2.10\",\"datePublished\":\"2021-11-01T17:26:40+00:00\",\"dateModified\":\"2023-01-21T05:31:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\"},\"wordCount\":204,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png\",\"keywords\":[\"stencil\"],\"articleSection\":[\"Announcements\",\"Stencil\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\",\"name\":\"Announcing Stencil v2.10 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png\",\"datePublished\":\"2021-11-01T17:26:40+00:00\",\"dateModified\":\"2023-01-21T05:31:33+00:00\",\"description\":\"We\u2019ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10!\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png\",\"width\":1600,\"height\":880,\"caption\":\"Stencil v2.10\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Stencil v2.10\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\",\"name\":\"Anthony Giuliano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"caption\":\"Anthony Giuliano\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/\",\"https:\/\/x.com\/a__giuliano\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/anthonyionic-io\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Stencil v2.10 - Ionic Blog","description":"We\u2019ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10","og_locale":"en_US","og_type":"article","og_title":"Announcing Stencil v2.10","og_description":"We\u2019ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10!","og_url":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10","og_site_name":"Ionic Blog","article_published_time":"2021-11-01T17:26:40+00:00","article_modified_time":"2023-01-21T05:31:33+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png","type":"image\/png"}],"author":"Anthony Giuliano","twitter_card":"summary_large_image","twitter_creator":"@a__giuliano","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Anthony Giuliano","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"Announcing Stencil v2.10","datePublished":"2021-11-01T17:26:40+00:00","dateModified":"2023-01-21T05:31:33+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10"},"wordCount":204,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png","keywords":["stencil"],"articleSection":["Announcements","Stencil"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10","url":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10","name":"Announcing Stencil v2.10 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png","datePublished":"2021-11-01T17:26:40+00:00","dateModified":"2023-01-21T05:31:33+00:00","description":"We\u2019ve been hard at work the past few weeks, and we are excited to now announce the release of Stencil v2.10!","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v2-10"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png","width":1600,"height":880,"caption":"Stencil v2.10"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-10#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Stencil v2.10"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58","name":"Anthony Giuliano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","caption":"Anthony Giuliano"},"sameAs":["https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/","https:\/\/x.com\/a__giuliano"],"url":"https:\/\/ionic.io\/blog\/author\/anthonyionic-io"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/11\/stencil210-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3906"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3906\/revisions"}],"predecessor-version":[{"id":4711,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3906\/revisions\/4711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3905"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}