CODEWITHSUNDEEP
cssangularshadow-dom
Gourav Pokharkar
Gourav Pokharkar

Reputation: 1648

How to use ::slotted inside ViewCapsulation.ShadowDom mode in Angular?

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?

Upvotes: 8

Views: 3056

Answers (1)

cnps
cnps

Reputation: 151

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.

Upvotes: 1

Related Questions