{"id":2304,"date":"2018-08-16T17:54:58","date_gmt":"2018-08-16T17:54:58","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2304"},"modified":"2018-12-12T22:40:01","modified_gmt":"2018-12-12T22:40:01","slug":"shadow-dom-in-ionic-and-why-its-awesome","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome","title":{"rendered":"Shadow DOM in Ionic (and Why it&#8217;s Awesome)"},"content":{"rendered":"<p><em>It lurks in the shadows&#8230;creating hidden trees&#8230;playing by a set of its own rules&#8230;it&#8217;s\u2026<\/em><\/p>\n<p><strong>SHADOW DOM!<\/strong><\/p>\n<p>But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS.<\/p>\n<p>I\u2019d like to think we here at Ionic know a thing or two about Shadow DOM, as we recently made the move to using it in Ionic 4, and with that, received a lot of questions from the community on just what the heck it is. There&#8217;s a lot of information (and misinformation) floating around about Shadow DOM, so let&#8217;s go through the API and see what it <strong>actually<\/strong> does.<\/p>\n<p><!--more--><\/p>\n<h2>What is Shadow DOM?<\/h2>\n<p>Shadow DOM sounds like it could be a complicated API, but it\u2019s actually built on two simple ideas, isolation and location. Need to create a bit of DOM that is isolated from the global scope? Shadow DOM is here to help. Need to specify the exact location of a piece of DOM? Shadow DOMs scope API is what you need!<\/p>\n<p>It can be helpful to think of components that use Shadow DOM as modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. This enables us to unlock some pretty incredible benefits:<\/p>\n<ul>\n<li>Isolated DOM<\/li>\n<li>Isolated CSS<\/li>\n<li>Simplified CSS Rules<\/li>\n<\/ul>\n<p>Typically, Shadow DOM is associated with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_custom_elements\">Custom Elements<\/a>, but you can still use Shadow DOM with regular HTML elements. In fact, most browsers use Shadow DOM without you even noticing. For example, every time you use video tag, you\u2019re actually using an element that has Shadow  DOM. Think about it, devs just need to write the <code>&lt;video&gt;<\/code> element, supply a video source, and set a few attributes on the HTML.<\/p>\n<pre><code class=\"html\">&lt;video src=&quot;https:\/\/some-video.mp4&quot; controls&gt;&lt;\/video&gt;\n<\/code><\/pre>\n<p>But parts of the video element, like video controls, are automatically created. Developers don\u2019t actually have to provide their own play button, progress bar, volume control, they\u2019re automatically provided. This is Shadow DOM in action!<\/p>\n<p>Now let\u2019s use this bit of Ionic markup:<\/p>\n<pre><code class=\"html\">&lt;ion-content&gt;\n  &lt;ion-item&gt;\n    Hello World\n  &lt;\/ion-item&gt;\n  &lt;ion-button&gt;\n    I&#039;m a button\n  &lt;\/ion-button&gt;\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<p>This markup is pretty simple, all we\u2019re doing is rendering an item and a button. Nothing too special right? Well, let\u2019s look at the dev tools<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"621\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM.png\" alt=\"\" class=\"aligncenter size-full wp-image-2305 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM.png 1200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM-300x155.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM-768x397.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM-1024x530.png 1024w\" data-sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/621;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"621\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM.png\" alt=\"\" class=\"aligncenter size-full wp-image-2305\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM.png 1200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM-300x155.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM-768x397.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/Screen-Shot-2018-08-06-at-9.54.08-AM-1024x530.png 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/noscript><\/a><\/p>\n<p>Woah, where did all this come from? This is Shadow DOM working in Ionic\u2019s components. All the internals of <code>ion-item<\/code> and <code>ion-button<\/code> can be abstracted away from the user, meaning all they need to know is the tag name, and is automatically handled by the browser.  In short&#8230;it\u2019s magic!<\/p>\n<p>For Slots, we can provide all the entry points up front. For example, <code>ion-item<\/code> has three slots, Start, End, and the default. By using Shadow DOM, we can keep their location right where we want them to be, vs having users write their markup in a specific order. So there could be an item written as:<\/p>\n<pre><code class=\"html\">  &lt;ion-item&gt;\n    &lt;ion-icon name=&quot;home&quot; slot=&quot;end&quot;&gt;&lt;\/ion-icon&gt;\n    Hello World\n  &lt;\/ion-item&gt;\n<\/code><\/pre>\n<p>And Shadow DOM and slots would know how to correctly render this.<\/p>\n<p>Ok, so what\u2019s the big deal? Ionic v3 already did something similar using Angular\u2019s Content Projection. While Angular\u2019s Content Projection is available, V4\u2019s approach uses standardized APIs that all browser vendors have agreed on. Meaning, there\u2019s no extra code needed at run time. By using the Shadow DOM, we get all the benefits of content projection, but built into the browser.<\/p>\n<p>From a component author\u2019s perspective, we can now author Ionic\u2019s components in a way to prevents most breaking changes. Since we can control where and how a component&#8217;s content can be rendered, we\u2019re able to prevent many mistakes and harden user&#8217;s code.<\/p>\n<p>With the component\u2019s internal markup isolated, updates and improvements can be made to any component, without the end user needing  to update their code.<\/p>\n<p>This is the <em>real<\/em> reason why Shadow DOM is being used in Ionic.<\/p>\n<h2>Parting Words<\/h2>\n<p>While Shadow DOM has been around for a few years now, it\u2019s reached the point where we can finally take advantage of it in modern browsers. For the older browsers that are still around, we got them covered too, with on-the-fly polyfills being loaded. If a browser doesn\u2019t support native Shadow DOM, we can polyfill it on-demand. However, if a browser already has native support, Ionic never downloads and parses any unnecessary polyfill JavaScript, but rather just uses the built in API.<\/p>\n<p>It&#8217;s one of the many new exciting features under the hood in Ionic 4, and makes maintaining the Framework much easier. And as a result, we\u2019ve been able to drastically reduce the amount of CSS code required for users\u2019 apps because of its simplicity. Less code === Faster apps.<\/p>\n<p>On top of that, devs building with Ionic don\u2019t need to worry about potential breaking changes. Smaller CSS that is easier to maintain, and markup that has fewer breaking changes&#8230; what\u2019s not to love about Shadow DOM?!<\/p>\n<p>In a future post, we&#8217;ll look at how theming is done in V4 now that all of Ionic&#8217;s styles are isolated&#8230;<\/p>\n<blockquote><p>\n  Spoiler, it\u2019s CSS Variables \ud83d\ude0f\n<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>It lurks in the shadows&#8230;creating hidden trees&#8230;playing by a set of its own rules&#8230;it&#8217;s\u2026 SHADOW DOM! But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS. I\u2019d like to think [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2310,"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,121,123,124],"tags":[3,112,82],"class_list":["post-2304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-engineering","category-perspectives","category-tutorials","tag-ionic","tag-shadow-dom","tag-web-components"],"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>Shadow DOM in Ionic (and Why it&#039;s Awesome) - 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\/shadow-dom-in-ionic-and-why-its-awesome\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shadow DOM in Ionic (and Why it&#039;s Awesome)\" \/>\n<meta property=\"og:description\" content=\"It lurks in the shadows&#8230;creating hidden trees&#8230;playing by a set of its own rules&#8230;it&#8217;s\u2026 SHADOW DOM! But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS. I\u2019d like to think [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-16T17:54:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-12T22:40:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Shadow DOM in Ionic (and Why it&#8217;s Awesome)\",\"datePublished\":\"2018-08-16T17:54:58+00:00\",\"dateModified\":\"2018-12-12T22:40:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome\"},\"wordCount\":863,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg\",\"keywords\":[\"Ionic\",\"Shadow DOM\",\"web components\"],\"articleSection\":[\"All\",\"Engineering\",\"Perspectives\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome\",\"url\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome\",\"name\":\"Shadow DOM in Ionic (and Why it's Awesome) - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg\",\"datePublished\":\"2018-08-16T17:54:58+00:00\",\"dateModified\":\"2018-12-12T22:40:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg\",\"width\":1400,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shadow DOM in Ionic (and Why it&#8217;s Awesome)\"}]},{\"@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\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Shadow DOM in Ionic (and Why it's Awesome) - 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\/shadow-dom-in-ionic-and-why-its-awesome","og_locale":"en_US","og_type":"article","og_title":"Shadow DOM in Ionic (and Why it's Awesome)","og_description":"It lurks in the shadows&#8230;creating hidden trees&#8230;playing by a set of its own rules&#8230;it&#8217;s\u2026 SHADOW DOM! But, what exactly is Shadow DOM? Put simply, Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS. I\u2019d like to think [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome","og_site_name":"Ionic Blog","article_published_time":"2018-08-16T17:54:58+00:00","article_modified_time":"2018-12-12T22:40:01+00:00","og_image":[{"width":1400,"height":800,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg","type":"image\/jpeg"}],"author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Shadow DOM in Ionic (and Why it&#8217;s Awesome)","datePublished":"2018-08-16T17:54:58+00:00","dateModified":"2018-12-12T22:40:01+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome"},"wordCount":863,"commentCount":17,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg","keywords":["Ionic","Shadow DOM","web components"],"articleSection":["All","Engineering","Perspectives","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome","url":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome","name":"Shadow DOM in Ionic (and Why it's Awesome) - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg","datePublished":"2018-08-16T17:54:58+00:00","dateModified":"2018-12-12T22:40:01+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg","width":1400,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/shadow-dom-in-ionic-and-why-its-awesome#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Shadow DOM in Ionic (and Why it&#8217;s Awesome)"}]},{"@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\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/shadow_dom_ionic.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2304","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2304"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2304\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2310"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}