Search code examples
angularsass

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


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 {
...
}

Solution

  • 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