{"id":2986,"date":"2020-07-23T05:57:34","date_gmt":"2020-07-23T05:57:34","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=2986"},"modified":"2021-01-20T04:48:30","modified_gmt":"2021-01-20T04:48:30","slug":"viewencapsulation-in-angular","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/","title":{"rendered":"ViewEncapsulation in Angular"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>As we know that in Angular, most of us work with a singular DOM tree that represents the entire page and is loaded into the browser which means all the <a href=\"https:\/\/studysection.com\/blog\/latest-features-in-css\/\">CSS<\/a> and javascript work against the entire document tree.<\/p>\n<p>But if we want to import the part of the reusable components, the components should have their own styling Shadow DOM. Shadow DOM standard allows the view, style, and behaviour encapsulation.<\/p>\n<p><strong>Shadow DOM<\/strong> is like a parallel DOM tree hosted inside a component hidden away from the main DOM tree. Only Component itself has access to this shadow DOM  not any other part of the application.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/07\/tree.png\" alt=\"tree\" \/><\/p>\n<h3> Types of View Encapsulation<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/07\/list.png\" alt=\"list\"\/><\/p>\n<p><strong>ViewEncapsulation.Emulated: <\/strong>Angular will not create a Shadow DOM for the component and style will be scoped to the component. This is the default value for encapsulation.<\/p>\n<p><strong>ViewEncapsulation.Native:<\/strong> Angular creates a Shadow DOM for the component and the style will be scoped to that Shadow DOM.<\/p>\n<p><strong>ViewEncapsulation.None:<\/strong> Angular will not create a Shadow DOM for the component and the component style can affect all nodes in the DOM.<\/p>\n<p><small><em>If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level <a href=\"https:\/\/www.studysection.com\/php-web-developer-advanced-diploma\">PHP certification exams<\/a> are offered by StudySection along with other programming certification exams. <\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction As we know that in Angular, most of us work with a singular DOM tree that represents the entire<\/p>\n","protected":false},"author":1,"featured_media":2987,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[499,500],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>StudySection Blog - ViewEncapsulation in Angular Framework<\/title>\n<meta name=\"description\" content=\"In Angular, most of us work with a singular DOM tree that represents entire page where CSS and JavaScript work against document tree.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - ViewEncapsulation in Angular Framework\" \/>\n<meta property=\"og:description\" content=\"In Angular, most of us work with a singular DOM tree that represents entire page where CSS and JavaScript work against document tree.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-23T05:57:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-20T04:48:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/07\/angular.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\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:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"ViewEncapsulation in Angular\",\"datePublished\":\"2020-07-23T05:57:34+00:00\",\"dateModified\":\"2021-01-20T04:48:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\"},\"wordCount\":231,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Angular\",\"Encapsulation\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\",\"url\":\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\",\"name\":\"StudySection Blog - ViewEncapsulation in Angular Framework\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2020-07-23T05:57:34+00:00\",\"dateModified\":\"2021-01-20T04:48:30+00:00\",\"description\":\"In Angular, most of us work with a singular DOM tree that represents entire page where CSS and JavaScript work against document tree.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ViewEncapsulation in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - ViewEncapsulation in Angular Framework","description":"In Angular, most of us work with a singular DOM tree that represents entire page where CSS and JavaScript work against document tree.","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:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - ViewEncapsulation in Angular Framework","og_description":"In Angular, most of us work with a singular DOM tree that represents entire page where CSS and JavaScript work against document tree.","og_url":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2020-07-23T05:57:34+00:00","article_modified_time":"2021-01-20T04:48:30+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/07\/angular.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"ViewEncapsulation in Angular","datePublished":"2020-07-23T05:57:34+00:00","dateModified":"2021-01-20T04:48:30+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/"},"wordCount":231,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Angular","Encapsulation"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/","url":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/","name":"StudySection Blog - ViewEncapsulation in Angular Framework","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2020-07-23T05:57:34+00:00","dateModified":"2021-01-20T04:48:30+00:00","description":"In Angular, most of us work with a singular DOM tree that represents entire page where CSS and JavaScript work against document tree.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/viewencapsulation-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"ViewEncapsulation in Angular"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":619,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/2986"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=2986"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/2986\/revisions"}],"predecessor-version":[{"id":3823,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/2986\/revisions\/3823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/2987"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=2986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=2986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=2986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}