Why to use ::ng-deep

::ng-deep , /deep/, >>> will be deprecated…??

As we understand, Angular was using the browser support for the piercing selectors /deep/ and >>>. But :ng-deep is surely not supported by any browser.

And this is what we find confusing in the documentation. We don’t understand what browser support has anything to do with :ng-deep.

Clarify Information about Deprecation

The way I understand it, :ng-deep prevents Angular from appending the attribute selectors to all selector following it.

So, this CSS in a component:

:host ::ng-deep .my-button .ui-button-text {
    font-weight: bold;
  }

Will be transformed to:

[_nghost-c12]    .my-button .ui-button-text {
  font-weight: bold;
}

Without :ng-deep, this will be produced instead:

[_nghost-c12]   .my-button[_nghost-c12] .ui-button-text[_nghost-c12] {
  font-weight: bold;
}

Ø Keep using ::ng-deep and its alternatives until a replacement is created — the deprecation is just an early notice so that people aren’t using it always, only use where required.

Ø To bypass the deprecated ::ng-deep, I usually disable ViewEncapsulation. Although this is not the best approach,

Ø To disable ViewEncapsulation, do the following in your component:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class TestComponent {

}

Component This will make scss styles in this component global level to the application level. If we wrap whole scss with selector, we can prevent chain to go up to parent and sibling components.

However, this is not the best solution so far.

:ng-deep and recommend replacement

We can still use ng-deep and it’s going to work also but it forgets going too deep. Basically, deep style is un-encapsulated style so it’s more like common style than component style.

Solution

1. Use root level specific SCSS selector as shown-

 app-test {
  app-child-test {
    app-child-edit.thead {
      form {
        div {
          // 5 levels deep 
          ng-select {
            width: 100%;
          }
        }
      }
     }
    }

2. Set the component to encapsulation: viewEncapsulation.

  encapsulation: ViewEncapsulation.None

3. The simple and easy alternative to a deep style is a common style using the element selector of the parent component. If we use it without the :host pseudo-class, it will make the style-rule global, not a good thing.

:host ::ng-deep p {
  font-size: 10px;
}

4. ShadowDom encapsulated components cannot access to global styles. But they do have access to all CSS Custom Properties (CSS variables).

CSS variables should also be part of your global CSS for many purposes.

    encapsulation: ViewEncapsulation.ShadowDom

    this.customProp = getComputedStyle(
      document.documentElement
    ).getPropertyValue('--shadow-piercing-value');

These are the alternative that we can take as an alternative but the situation is still evolving, but right now, ::ng-deep can be used if needed for certain use cases.