{"id":4260,"date":"2022-05-31T18:02:51","date_gmt":"2022-05-31T18:02:51","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4260"},"modified":"2023-01-21T00:29:54","modified_gmt":"2023-01-21T05:29:54","slug":"announcing-stencil-v2-16","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16","title":{"rendered":"Announcing Stencil v2.16"},"content":{"rendered":"<p>After a few patch releases, the next minor version of Stencil is here! <a href=\"https:\/\/github.com\/ionic-team\/stencil\/releases\/tag\/v2.16.0\">Stencil v2.16<\/a> is filled with new, exciting features that we think you\u2019ll really enjoy. We\u2019ve also implemented some bug fixes that are sure to improve the Stencil developer experience. This release is filled with contributions from the community. As always, we are incredibly grateful for all the ways the community makes Stencil better. Now without further ado, let\u2019s see what\u2019s inside Stencil v2.16.<\/p>\n<p><!--more--><\/p>\n<h2>Vite Support<\/h2>\n<p>Perhaps one of the most exciting features of Stencil v2.16 is support for <a href=\"https:\/\/vitejs.dev\/\">Vite<\/a>! Vite is a modern build tool that has been growing in popularity and we want to ensure that Stencil can be used alongside modern technologies. So with the release of Stencil v2.16, Stencil components can now be utilized in applications that use Vite as their bundler. It is important to note that this does not introduce the ability for Stencil&#8217;s compiler to use bundlers other than Rollup under the hood. We\u2019d like to thank <a href=\"https:\/\/github.com\/johnjenkins\">@johnjenkins<\/a> for their PR and <a href=\"https:\/\/github.com\/PrinceManfred\">@PrinceManfred<\/a> for providing test cases. This feature would not have been possible without their contributions.<\/p>\n<h2>Custom HTMLElement Type<\/h2>\n<p>Another great feature included in the v2.16 release is a custom HTMLElement type for event targets. This feature allows developers to access all the public methods available on the host element when a custom event is emitted. Here is an example of how this could be used:<\/p>\n<pre><code class=\"language-html\">&lt;ion-infinite onIonInfinite={ev =&gt; ev.target.complete()} \/&gt;\n<\/code><\/pre>\n<p>Shoutout to <a href=\"https:\/\/github.com\/sean-perkins\">@sean-perkins<\/a> for his work on landing this feature.<\/p>\n<h2>Bugs<\/h2>\n<p>In addition to these exciting new features, we\u2019ve also squashed some bugs in this release. In previous Stencil versions, some conditions could result in Stencil running a build twice when the <code>stencil build<\/code> command was executed. This sometimes affected the documentation that Stencil generates. In v2.16, this is no longer an issue as Stencil builds only once when prompted. Much thanks goes to <a href=\"https:\/\/github.com\/danschultz\">@danschultz<\/a> and <a href=\"https:\/\/github.com\/dmartinjs\">@dmartinjs<\/a> for reporting and investigating this issue.<\/p>\n<p>We\u2019ve also improved the implementation of the mock doc <code>Node.contains<\/code> method, which previously only looked for nodes one level deep. The method now recursively searches all child nodes of the given node. Huge shoutout to <a href=\"https:\/\/github.com\/erwinheitzman\">@erwinheitzman<\/a> for reporting and patching this issue. For more information on the <code>Node.contains<\/code> method, check out the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/contains\">official documentation<\/a>.<\/p>\n<h2>Become a Contributor<\/h2>\n<p>We hope you find these features and fixes helpful. If there is something you would like to see in a future version of Stencil, <a href=\"https:\/\/github.com\/ionic-team\/stencil\/issues\/new\/choose\">create an issue<\/a> or <a href=\"https:\/\/github.com\/ionic-team\/stencil\/pulls\">submit a pull request<\/a>. We\u2019re always looking for new ways to improve the Stencil development experience. Until the next release, happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After a few patch releases, the next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy. We\u2019ve also implemented some bug fixes that are sure to improve the Stencil developer experience. This release is filled with contributions from the community. As always, we are [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":4261,"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":"547768","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/announcing-stencil-v2-16\/223757","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120,223],"tags":[76],"class_list":["post-4260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","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.16 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"The next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy.\" \/>\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-16\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Stencil v2.16\" \/>\n<meta property=\"og:description\" content=\"The next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-31T18:02:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:29:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-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=\"2 minutes\" \/>\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-16#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"Announcing Stencil v2.16\",\"datePublished\":\"2022-05-31T18:02:51+00:00\",\"dateModified\":\"2023-01-21T05:29:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16\"},\"wordCount\":434,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png\",\"keywords\":[\"stencil\"],\"articleSection\":[\"All\",\"Announcements\",\"Stencil\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16\",\"name\":\"Announcing Stencil v2.16 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png\",\"datePublished\":\"2022-05-31T18:02:51+00:00\",\"dateModified\":\"2023-01-21T05:29:54+00:00\",\"description\":\"The next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png\",\"width\":1600,\"height\":880,\"caption\":\"Stencil version 2.16\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Stencil v2.16\"}]},{\"@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.16 - Ionic Blog","description":"The next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy.","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-16","og_locale":"en_US","og_type":"article","og_title":"Announcing Stencil v2.16","og_description":"The next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy.","og_url":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16","og_site_name":"Ionic Blog","article_published_time":"2022-05-31T18:02:51+00:00","article_modified_time":"2023-01-21T05:29:54+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"Announcing Stencil v2.16","datePublished":"2022-05-31T18:02:51+00:00","dateModified":"2023-01-21T05:29:54+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16"},"wordCount":434,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png","keywords":["stencil"],"articleSection":["All","Announcements","Stencil"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16","url":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16","name":"Announcing Stencil v2.16 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png","datePublished":"2022-05-31T18:02:51+00:00","dateModified":"2023-01-21T05:29:54+00:00","description":"The next minor version of Stencil is here! Stencil v2.16 is filled with new, exciting features that we think you\u2019ll really enjoy.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-stencil-v2-16"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/05\/stencil216-feature-image.png","width":1600,"height":880,"caption":"Stencil version 2.16"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-stencil-v2-16#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Stencil v2.16"}]},{"@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\/2022\/05\/stencil216-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4260","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=4260"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4260\/revisions"}],"predecessor-version":[{"id":4700,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4260\/revisions\/4700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4261"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}