Alternative to /Deep/

What to use in place of ::ng-deep

FWIW In my research I have not found any replacement for ng-deep or the other applicable alternatives. This is because, I believe, the Angular team is deferring to the W3C spec on the shadow dom, which initially had selectors such as deep. However, the W3c has since removed the recommendation, but not replaced it with a new one. Until that happens, I imagine that the Angular team will keep ::ng-deep and it's alternatives available, but in deprecated state due to the pending state of W3C's drafts. I am not able to take the time to find the documentation to back this up right now but I did see it recently.

Long story short: Keep using ::ng-deep and its alternatives until a replacement is created - the deprecation is just an early notice so that people aren't blindsided whenever the actual change materializes.

-- UPDATE --

https://drafts.csswg.org/css-scoping-1/
Here is the draft proposal if you're interested. It appears that they are working on a robust set of selectors for elements within a shadow dom tree; it is this spec, once approved, that I think will inform the angular clone, if there even is one (i.e. angular may not need to implement their own selectors once this goes live in browsers).

What is the long-term alternative solutions to /deep/ OR ::ng-deep?

Currently there's no alternative right now, so we should all continue to use it, because it's practical.

When ViewEncapsulation.Native is properly supported by all browsers and supports styling across shadow DOM boundaries, ::ng-deep will probably be discontinued.

What's the substitute for ::shadow and /deep/?

::shadow and /deep/ were removed for breaking encapsulation.

The substitutes are:

• CSS variables.
  It already works natively with the recently launched Google Chrome 49. Read here:
  
  
  1. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
  2. https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
  3. http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html
• :host-context. Read here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

What would constitute an alternative to deep equality checks in useEffect?

Maybe this library could be useful to you:
https://github.com/kentcdodds/use-deep-compare-effect

Use of ::ng-deep recommendation in angular

It's recommended to avoid using ng-deep as it is marked deprecated.

See here in the angular documentation

There has been raised a question what's the alternative here on stackoverflow

How to Style ng-bootstrap - Alternative to /deep/

I've done some digging and it is possible to overwrite the ng-bootstrap styles if you turn off the view encapsulation for a component, like so:

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

    constructor(public activeModal: NgbActiveModal) { }

}

For example, here I am customizing the styles for a modal dialog, because I assumed that my example component should be shown as a modal dialog and I want its width to be at maximum 70% of the view port in small screen sizes:

.modal-dialog {
  @include media-breakpoint-down(xs) {
    max-width: 70vw;
    margin: 10px auto;
  }
}

Please note that turning off the view encapsulation means that the styles for this particular component will be available throughout the application, therefore other components will have access to them and will eventually use them if you are not careful.

---

Related Topics