Targeting your Shadow DOM with Google's Angular 5

Question

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)?

Answer 1

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.

Answer 2

@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.

Answer 3

@Mr NooBie I'll let you know when I find one

Answer 4

I found it just before checking back here:

::ng-deep .mat-menu-content { padding-top: 1px; padding-bottom: 1px }