What to Use in Place of ::Ng-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).

How and where to use ::ng-deep?

Usually /deep/ “shadow-piercing” combinator can be used to force a style down to child components. This selector had an alias >>> and now has another one called ::ng-deep.

since /deep/ combinator has been deprecated, it is recommended to use ::ng-deep

For example:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

and css

.overview {
::ng-deep {
p {
&:last-child {
margin-bottom: 0;
}
}
}
}

it will be applied to child components

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 is the the scope of ::ng-deep?

:ng-deep is global. No matter where you put it, it applies to all components. Not just children.

If you use :host :ng-deep, then it will work from that component down (Into the children, grand children etc).

The main issue working with ng-deep is that styles in Angular are lazy loaded. So in some cases, you can be viewing the site perfectly fine, then you view a particular page that uses ng-deep, then you can go back to previous pages that were fine that are now broken because the ng-deep style is applied site wide. e.x. https://tutorialsforangular.com/2020/04/13/the-dangers-of-ng-deep-bleeding/

Generally speaking, if I need to style a child component slightly differently depending on where it's placed, then I create an input variable for the child, make the parent set it, then make it a class somewhere in the child component HTML. The child component can then style that class how it see's fit and you haven't had to break encapsulation.

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



Related Topics



Leave a reply



Submit