{"id":2391,"date":"2018-10-31T21:41:18","date_gmt":"2018-10-31T21:41:18","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2391"},"modified":"2018-12-12T22:38:39","modified_gmt":"2018-12-12T22:38:39","slug":"october-2018-a-big-month-for-web-components","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components","title":{"rendered":"October 2018: A Big Month for Web Components"},"content":{"rendered":"

Wow, what a month! October saw some big news drop:<\/p>\n

Firefox version 63 enabled the Shadow DOM and Custom Elements (aka Web Components) APIs by default:<\/p>\n

https:\/\/twitter.com\/julienrenaux\/status\/1054294514742018048<\/p>\n

And<\/strong>, web components and Shadow DOM<\/a> support are now stable across all major browsers, with exception of Microsoft Edge. However, ME\u2019s team has started development, so that\u2019s good news.<\/p>\n

\"\"

Naturally, we\u2019re very excited about this over at Ionic, as the upcoming version of our open source UI toolkit, Framework v4, is built on web components.<\/p>\n

<\/p>\n

Why is Ionic so invested in Web Components?<\/h2>\n

Ionic’s goal has always been to make it easy to develop apps using web technologies (HTML, CSS, and JavaScript). By using web technologies, Ionic is able to work across a wide range of devices, operating systems, and browsers, all while using the same codebase. Looking to the future, it\u2019s clear that web components are the way forward:<\/p>\n

  • Ionic framework UI components become more stable.<\/strong> By leveraging the built-in capabilities that all major browsers are standardizing on, our team has more time to innovate on new features and bug fixes.<\/li>\n
  • Support for additional platforms without significant rework.<\/strong> Today, iOS and Android, tomorrow\u2026 no one knows. Platforms come and go (remember Windows Phone? Blackberry?), but Ionic is forever \ud83d\udc99.<\/li>\n
  • Support for additional JavaScript frameworks.<\/strong> Traditionally, Ionic has been tied to Angular, but the possibilities are opening up. Soon, we\u2019ll support React and Vue. Who knows what JavaScript framework will be popular five years from now? That\u2019s OK – we\u2019ll be ready for it!<\/a><\/li>\n

    What about Legacy Browsers?<\/h2>\n

    While we focus on the future, we understand that some developers need to support older browsers, such as Internet Explorer 11. Good news: Ionic Framework v4 dynamically includes all the polyfills needed to support them! A polyfill<\/a> \u201cfills in\u201d the code that modern browsers provide natively and traditionally, they are always downloaded by all users, whether the browser required them or not. Ionic takes the opposite approach: only browsers that require the polyfills (Microsoft IE and Edge) download them.<\/p>\n

    The result? You, the developer, don\u2019t need to do any extra work – just use the feature directly.<\/p>\n

    The future, powered by cross-platform web components, is very bright. Have you checked out the Ionic v4 beta yet? Get started here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Wow, what a month! October saw some big news drop: Firefox version 63 enabled the Shadow DOM and Custom Elements (aka Web Components) APIs by default: https:\/\/twitter.com\/julienrenaux\/status\/1054294514742018048 And, web components and Shadow DOM support are now stable across all major browsers, with exception of Microsoft Edge. However, ME\u2019s team has started development, so that\u2019s good […]<\/p>\n","protected":false},"author":62,"featured_media":2402,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,123],"tags":[112,82],"class_list":["post-2391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-perspectives","tag-shadow-dom","tag-web-components"],"acf":[],"yoast_head":"\nOctober 2018: A Big Month for Web Components - Ionic Blog<\/title>\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\/october-2018-a-big-month-for-web-components\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"October 2018: A Big Month for Web Components\" \/>\n<meta property=\"og:description\" content=\"Wow, what a month! October saw some big news drop: Firefox version 63 enabled the Shadow DOM and Custom Elements (aka Web Components) APIs by default: https:\/\/twitter.com\/julienrenaux\/status\/1054294514742018048 And, web components and Shadow DOM support are now stable across all major browsers, with exception of Microsoft Edge. However, ME\u2019s team has started development, so that\u2019s good […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-31T21:41:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-12T22:38:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Netkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotNetkow\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Netkow\" \/>\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\/october-2018-a-big-month-for-web-components#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components\"},\"author\":{\"name\":\"Matt Netkow\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\"},\"headline\":\"October 2018: A Big Month for Web Components\",\"datePublished\":\"2018-10-31T21:41:18+00:00\",\"dateModified\":\"2018-12-12T22:38:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components\"},\"wordCount\":391,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg\",\"keywords\":[\"Shadow DOM\",\"web components\"],\"articleSection\":[\"All\",\"Perspectives\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components\",\"url\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components\",\"name\":\"October 2018: A Big Month for Web Components - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg\",\"datePublished\":\"2018-10-31T21:41:18+00:00\",\"dateModified\":\"2018-12-12T22:38:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg\",\"width\":1400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"October 2018: A Big Month for Web Components\"}]},{\"@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\/93c8b2fe110f183510c6285b0de40790\",\"name\":\"Matt Netkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"caption\":\"Matt Netkow\"},\"sameAs\":[\"https:\/\/x.com\/dotNetkow\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mattnetkow\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"October 2018: A Big Month for Web Components - Ionic Blog","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\/october-2018-a-big-month-for-web-components","og_locale":"en_US","og_type":"article","og_title":"October 2018: A Big Month for Web Components","og_description":"Wow, what a month! October saw some big news drop: Firefox version 63 enabled the Shadow DOM and Custom Elements (aka Web Components) APIs by default: https:\/\/twitter.com\/julienrenaux\/status\/1054294514742018048 And, web components and Shadow DOM support are now stable across all major browsers, with exception of Microsoft Edge. However, ME\u2019s team has started development, so that\u2019s good […]","og_url":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components","og_site_name":"Ionic Blog","article_published_time":"2018-10-31T21:41:18+00:00","article_modified_time":"2018-12-12T22:38:39+00:00","og_image":[{"width":1400,"height":400,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg","type":"image\/jpeg"}],"author":"Matt Netkow","twitter_card":"summary_large_image","twitter_creator":"@dotNetkow","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Netkow","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components"},"author":{"name":"Matt Netkow","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790"},"headline":"October 2018: A Big Month for Web Components","datePublished":"2018-10-31T21:41:18+00:00","dateModified":"2018-12-12T22:38:39+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components"},"wordCount":391,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg","keywords":["Shadow DOM","web components"],"articleSection":["All","Perspectives"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components","url":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components","name":"October 2018: A Big Month for Web Components - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg","datePublished":"2018-10-31T21:41:18+00:00","dateModified":"2018-12-12T22:38:39+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg","width":1400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/october-2018-a-big-month-for-web-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"October 2018: A Big Month for Web Components"}]},{"@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\/93c8b2fe110f183510c6285b0de40790","name":"Matt Netkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","caption":"Matt Netkow"},"sameAs":["https:\/\/x.com\/dotNetkow"],"url":"https:\/\/ionic.io\/blog\/author\/mattnetkow"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/10\/wc-blog-header.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2391","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\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2391"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2402"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}