Разница между: host :: ng-deep .class и .class: host :: ng-deep?

Прежде всего, :host и ::ng-deep - это конструкции Angular, не имеющие ничего общего с SASS.

Теперь предположим, что у вас есть компонент с именем «blog», определенный в Angular, и blog.component.scss - это то место, где вы определяете для него SASS. Потом,

ДЕЛО 1 :

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

применит стиль, определенный к любому элементу с классом .content-body внутри области компонента. Например:

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

В приведенном выше случае стиль будет применен к обоим class = "content-body"div.

СЛУЧАЙ 2:

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

применит стиль, определенный только к экземплярам компонентов, которые определены внутри элемента с class = "content-body"
Например:

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

Вы можете проверьте StackBlitz здесь. В примере StackBlitz color:red применяется из-за ДЕЛО 1 внутри app.component.css, а color:yellow применяется только к одному из компонентов hello из-за СЛУЧАЙ 2.
Не стесняйтесь раскошелиться на Stackblitz и поиграть.

ПРИМЕЧАНИЕ : Если вы еще не знаете, комбинатор прокалывания тени ::ng-deepустарел