Showing posts from February, 2018

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.tscustom.component.csscustom.component.htmlIn 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; }