Menu
I had added ::ng-deep combinator for referencing a content projected element in my component. But when I switched from default (ViewEncapsulation.Emulated) to ViewEncapsulation.ShadowDom mode, obviously ::ng-deep not being native Shadow DOM selector, old CSS didn't work.
/* This works in ViewEncapsulation.Emulated */
:host ::ng-deep .course-description {
max-width: 360px;
margin: 0 auto;
margin-top: 15px;
user-select: none;
}
Surprisingly, When I use /deep/ combinator (which is removed in Chrome v63 https://developers.google.com/web/updates/2017/10/remove-shadow-piercing) is working fine for ViewEncapsulation.ShadowDom in Chrome v75.0.3770.100
/* This works in ViewEncapsulation.ShadowDom */
:host /deep/ .course-description {
max-width: 360px;
margin: 0 auto;
margin-top: 15px;
user-select: none;
}
Can it be possible to use ::slotted() inside the component CSS to make it work as before but in ViewEncapsulation.ShadowDom mode? If yes, how?
961
ViewEncapsulation.ShadowDom. Angular uses the browser's built-in Shadow DOM API to enclose the component's view inside a ShadowRoot (used as the component's host element) and apply the provided styles in an isolated manner. ViewEncapsulation.
Shadow DOM is like a parallel DOM tree hosted inside a component (an HTML element, not to be confused with Angular components), hidden away from the main DOM tree. No part of the application has access to this shadow DOM other than the component itself.
View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies: Emulated (default) - styles from main HTML propagate to the component.
Emulates a native Shadow DOM encapsulation behavior by adding a specific attribute to the component's host element and applying the same attribute to all the CSS selectors provided via styles or styleUrls. This is the default option. None: 2.
You are out of luck. ::slotted is not supported by .Emulated. It is however supported by. Native
ng-deep is also deprecated and afaik, there's no planned replacement, yet.
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).
I'm still not sure, if they are working on a solution or just wants us to forget about it.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
