Angular 4/5 override class in body tag (Shadow Piercing combinators approach)

In angular component CSS styles are encapsulated into the component's view and don't affect the rest of the application; usually this is the behaviour that you want however sometimes it's useful to be able to affect tags outside the component, for example the body tag

This can be achieved in a few different ways, like for example tweaking view encapsulation parameters

In this post I will show you a CSS approach to this using The Shadow Piercing combinators, starting in Angular 4.3.0 you can use the custom shadow piercing combinator ::ng-deep to achieve this

For example if we had a component named "CustomComponent" we could have a set of files similar to :

• custom.component.ts
• custom.component.css
• custom.component.html

In order for us to shadow and override the main body tag would be to put the following in the custom.component.css :

::ng-deep body {
  min-height: 75rem;
  padding-top: 4.5rem;
}