Angular has a great CSS feature called \u201cView Encapsulation\u201d. It means that each component can have it\u2019s own CSS that is encapsulated and applied to only that particular component\/view. This does away with having to have great big long CSS declarations to try and narrow down the element you want to style. For example you probably have seen gnarly things like :<\/p>\n\n\n\n
.main-page #header-wrapper #header-div #header-left-panel h1 span{\n\n}<\/code><\/pre>\n\n\n\nWith Angular\u2019s View Encapsulation that is no more (Well\u2026 Atleast most of the time).<\/p>\n\n\n\n
But you may come across some situations where the view encapsulation gets in your way. Where you know the element you want to style, but the additions in the shadow dom are making things a headache. Luckily Angular adds in a couple of CSS Pseudo Elements that help you \u201cbreak out\u201d when you need to. These include :host, :host-context and ::ng-deep. Today we\u2019ll do a dive on :host.<\/p>\n\n\n\n
:host In A Nutshell<\/h3>\n\n\n\n
Imagine I create a component called \u201cmy-component\u201d that\u2019s pretty darn simple :<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\n@Component({\n selector: 'app-my-component',\n template : `<p>This is my component<\/p>`,\n styleUrls: ['.\/my-component.component.scss']\n})\nexport class MyComponentComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}<\/code><\/pre>\n\n\n\nNow if I want to style the component itself? How do I do that? How can I style the <app-my-component> tag? A beginners take might be to try some CSS\/SASS like so :<\/p>\n\n\n\n
app-my-component\n{\n display:block;\n background-color:blue;\n}<\/code><\/pre>\n\n\n\nAfter all, I\u2019m using the name of my tag inside itself so hopefully it should be recognized. Wrong. Angular view encapsulation means I can only style things \u201cinside\u201d the component, but not the component itself. Unless I use the :host pseudo element of course :<\/p>\n\n\n\n
:host\n{\n display:block;\n background-color:blue;\n}<\/code><\/pre>\n\n\n\nRemember this goes *inside* the components style file, and not in the root etc. Using :host I am able to self style the component! It\u2019s almost like using the \u201cthis\u201d keyword in Angular CSS syntax.<\/p>\n\n\n\n
What Goes On Under The Hood?<\/h3>\n\n\n\n
When your view is compiled down, your components are given unique attributes to encapsulate styles from one other. So in my example, app-my-component actually gets output looking like :<\/p>\n\n\n\n
<app-my-component _ngcontent-lsw-c0=\"\" _nghost-lsw-c1=\"\">\n\t<p _ngcontent-lsw-c1=\"\">This is my component<\/p>\n<\/app-my-component><\/code><\/pre>\n\n\n\nThe way it works (in a simple way) is that each component is given an _nghost-unique-id . Each element that lives inside that component is then given an _ngcontent-unique-id . Where the unique-id on the ngcontent label matches that of the parent nghost. Pretty smart stuff!<\/p>\n\n\n\n
So that goes a ways to explain why when we try our beginners attempt of just using the component tag :<\/p>\n\n\n\n
app-my-component\n{\n display:block;\n background-color:blue;\n}<\/code><\/pre>\n\n\n\nIt doesn\u2019t work because the generated CSS actually looks like :<\/p>\n\n\n\n
app-my-component[_ngcontent-lsw-c1] {\n display: block;\n background-color: blue;\n}<\/code><\/pre>\n\n\n\nSo notice that it\u2019s saying our tag should have an _ngcontent tag with a specific id but we are actually looking for the same tag with an _nghost.<\/p>\n\n\n\n
When we check how it generates and outputs the :host tag, it looks like :<\/p>\n\n\n\n
[_nghost-lsw-c1] \n{ \n\tdisplay: block; \n\tbackground-color: blue; \n}<\/code><\/pre>\n\n\n\nMakes sense! It outputs the exact tag it knows our component will have, allowing us to style the component itself, not just it\u2019s children.<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular has a great CSS feature called \u201cView Encapsulation\u201d. It means that each component can have it\u2019s own CSS that is encapsulated and applied to only that particular component\/view. This does away with having to have great big long CSS declarations to try and narrow down the element you want to style. For example you […]<\/p>\n","protected":false},"author":131,"featured_media":8180,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-8177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/8177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/131"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=8177"}],"version-history":[{"count":4,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/8177\/revisions"}],"predecessor-version":[{"id":13548,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/8177\/revisions\/13548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/8180"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=8177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=8177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=8177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}