Often we import components in templates, we may have a case where we need to updated css style for one of the component but don't want to update it in the original component. We try to reference the class and apply style to it but it doesn't work. The reason for that it the styles are specific for that particular component and they don't work exactly like your raw html and css would where you define some rules in a class and used that across the page.

Components have their own styles and they run in a silo, without affecting other components. Imagine component A is using component B, A wants to update certain styles for B, but A doesn't want B to be updated globally only until A is using B. To solve this problem A references a class from B and writes into its own css file hoping it would override css in B, but it doesn't. To solve it we have to apply it using /deep/


// in a.styles.scss

/deep/ .some-class-in-component-B {
  height: 500px !important;

Its simple enough.

Hope this helps.