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
Get the Value in an Input Text Box
Data Protocol Url Size Limitations
How to Avoid Joining All Text from Nodes When Scraping
Show an Image Preview Before Upload
Is There an Equivalent to Background-Size: Cover and Contain For Image Elements
Uri Starting With Two Slashes ... How Do They Behave
Why Does HTML Require That Multiple Spaces Show Up as a Single Space in the Browser
Flexbox Fill Available Space Vertically
Vertically Center Two Elements Within a Div
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
Single VS Double Quotes (' VS ")
Maintain Aspect Ratio of Div But Fill Screen Width and Height in Css
Force Flex Item to Span Full Row Width