Difference between :host::ng-deep .class and .class :host::ng-deep?

Question

What is the difference between the below two in scss, Give some examples in snippet.

:host::ng-deep .content-body {
...
}

and

.content-body :host::ng-deep {
...
}

Answer 1

First of all, :host and ::ng-deep are Angular constructs, nothing to do with SASS

Now, let's say you have a component named "blog" defined in Angular and blog.component.scss is where you define the SASS for it. Then,

CASE 1 :

:host::ng-deep .content-body {
...
}

will apply style defined to any element with the class .content-body inside the component scope. Eg:

<div>
  <blog>
    <div class="content-body"></div>
    <div class="some-extra-content">
      <div class="content-body"></div>
    </div>
  </blog>
</div>

In the above case, both the class="content-body" divs will have the style applied.

CASE 2 :

.content-body :host::ng-deep {
...
}

will apply style defined to only the component instances which are defined inside an element which has class="content-body"
Eg:

<blog></blog> <!-- Style won't be applied here -->
<div class="content-body">
  <blog></blog> <!-- Style will be applied here -->
</div>

You can check a StackBlitz here. In the StackBlitz example, color:red is applied because of CASE 1 inside app.component.css and color:yellow is applied to only one of the hello components because of CASE 2.
Feel free to fork the Stackblitz and play around.

NOTE : If you don't know already, the shadow piercing combinator ::ng-deep is being deprecated