::ng-deep going to be deprecated - Any alternatives?

Doc says:

> The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Since i want to upgrade to new versions without changing the code, whats are the alternatives for the deprecated methods?

After scouring through the actual notes from the committee meetings on this stuff, it doesn't look like there is an alternative put forward yet. Using the ::ng-deep syntax ensures that you let Angular take care of breaking out of the style encapsulation (for DOM nodes in child components in your template) that they are doing for your styles (and not using browser native features, making it more future-proof obviously). I think that note is just to let you know that whenever the actual browser mechanism is put in place they plan on implementing it. I personally wouldn't shy away from using it tho.

The only way forward without using that operator in your CSS is to completely opt out of letting Angular manage the style encapsulation for your component by doing this:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

If you do this, your styles become global though, so make sure you prepend each style rule with your component to make sure that they don't leak beyond that. For example, if you have a MyCustomComponent component with a selector of my-custom-component:

my-custom-component button { ... } /* good */
button { ... } /* bad */

One alternative that can work is to include the css styles in your global styles.scss file*.

For example, say you want to add a style to the <div class="mat-form-field-flex"> element that gets generated under a <mat-form-field>, you could use ::ng-deep likewise:

your.component.scss

::ng-deep mat-form-field.mat-form-field div.mat-form-field-flex {
  padding: 0 0 0 .75em;
}

Or instead, you can change:

styles.scss:

mat-form-field.mat-form-field  div.mat-form-field-flex {
  padding: 0 0 0 .75em;
}

---

*: This is any file that is added to the styles collection in your angular.json file.

"styles": [
          "src/theme.scss",
          "src/styles.scss"
        ],