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

Question

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?

@trichetriche `simply add classes or other selectors to your HTML elements` Angular's styles don't work like that if you try to style DOM nodes within a child component in your template due to their style encapsulation (mimicking shadow DOM in the browser) — Daniel W Strimpel, Apr 16 '18 at 14:41
@DanielWStrimpel that's why I asked a [mcve]. And simply remove the encapuslation or use global styles, with only a component selector you can get ride of that pseudo selector. — , Apr 16 '18 at 14:42
@trichetriche `with only a component selector you can get ride of that pseudo selector` yup, as long as you remove the encapsulation — Daniel W Strimpel, Apr 16 '18 at 14:44
@DanielWStrimpel I'm pretty sure you can do without removing it, using global styles. — , Apr 16 '18 at 14:45
@trichetriche Nope, not if you try to style a DOM node not in your template (i.e. try to change the color of a button found in a child component that your component uses... it breaks the encapsulation). https://plnkr.co/edit/tcD33E5cNjZmPcPncd0N?p=preview — Daniel W Strimpel, Apr 16 '18 at 14:59
I'm on phone so I can't see the plunkr, but I've been doing that for over two years now, so I don't really know what you're talking about. Encapsulation adds random attributes to your elements, I don't see how à style sheet could break that. — , Apr 16 '18 at 15:03
@trichetriche same bro... dive in and see what Angular does to the CSS rules — Daniel W Strimpel, Apr 16 '18 at 15:06
That's what I thought, we were not talking about the same thing. I was talking about global styles, and you didn't. If you declare your styles in the **global** stylesheet with the component selector as a CSS selector, it works. — , Apr 17 '18 at 06:32
@trichetriche yeah, that breaks the philosophy of keeping the styles for a component together in one place tho. — Daniel W Strimpel, Apr 19 '18 at 12:48
@DanielWStrimpel I totally agree with that, but when you look for a workaround, you can't really get picky ... — , Apr 19 '18 at 12:51
Does this answer your question? [What to use in place of ::ng-deep](https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep) — kapsiR, Nov 25 '21 at 13:48

Daniel W Strimpel · Answer 1 · 2018-04-16T17:13:35.600

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 */

See also this answer https://stackoverflow.com/a/49308475/2275011 and comments for more details and solutions. — Ferie, May 21 '19 at 10:28

score 2 · Answer 2 · answered Oct 30 '19 at 13:39

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"
        ],

yes, this is logical, as the global style file is for the global `index.html` file containing all angular app and components, though this index doesn't have any angular pre-built encapsulations which are equivalent to `ViewEncapsulation.None`. But don't really think it's a good approach to follow as it's gonna be hard to organize all the app style in the global file unless you create a custom style folder where you put all ng-deep customized styles. and then you import it to the global style file. — getName, Dec 06 '19 at 10:24

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

2 Answers2

Linked