+ 5

Targeting your Shadow DOM with Google's Angular 5

I have an Angular Materials menu which has padding above and below it I'd like all clean and pretty lookin' (e.g. gone or at least reduced in size). Thing of it is, the Materials menu creates a div below it *after* the DOM exists, so even ngAfterViewInit isn't helping. Does anyone know the answer: how do I target the Shadow DOM element with CSS (or even JavaScript or TypeScript)?

9th Mar 2018, 7:47 PM
Peter David Carter
Peter David Carter - avatar
4 ответов
+ 3
According to W3C the current way to do it, the /depth/ CSS selector, is going to be deprecated and will break forwards compatibility, but the new standard that will replace it isn't available yet.
9th Mar 2018, 9:27 PM
Peter David Carter
Peter David Carter - avatar
+ 3
@Mr NooBie atm? .mat-menu-content { padding-top: 1px; padding-bottom: 1px }. I also tried mat-menu /deep/ .mat-menu-content { padding-top: 1px; padding-bottom: 1px } but that doesn't work either.
10th Mar 2018, 8:01 AM
Peter David Carter
Peter David Carter - avatar
+ 2
@Mr NooBie I'll let you know when I find one
10th Mar 2018, 8:07 AM
Peter David Carter
Peter David Carter - avatar
+ 2
I found it just before checking back here: ::ng-deep .mat-menu-content { padding-top: 1px; padding-bottom: 1px }
10th Mar 2018, 9:16 AM
Peter David Carter
Peter David Carter - avatar