bug(tooltip): matTooltipClass Property Does Not Apply Component CSS Classes When ViewEncapsulation is set to Emulated

[Astrofyziky]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The matTooltipClass property will only apply global stylings, and will not apply component stylings when encapsulation is set to ViewEncapsulation.Emulated

Reproduction

Issue can be reviewed here: https://stackblitz.com/edit/components-issue-uxtnbp?file=src/app/example-component.ts

Steps to reproduce:

1. Open above stackblitz link
2. Hover over the "Hello" and notice the styling of the tooltip message
3. Within example-component.ts, change encapsulation to ViewEncapsulation.None or ViewEncapsulation.ShadowDom
4. Refresh the output page and notice the change in tooltip styling when hovering over "Hello"
5. Toggle the encapsulation, refresh the output page, and notice the different behaviors.

Expected Behavior

The classes passed to the matTooltipClass property should apply those styles, regardless of the encapsulation of the component.

Actual Behavior

The matTooltipClass property only applies the component-level styles when encapsulation is not set to ViewEncapsulation.Emulated

Environment

Angular CLI: 14.0.5 Node: 16.13.2 Package Manager: npm 8.1.3 OS: win32 x64

Angular: 14.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router

Package Version

@angular-devkit/architect 0.1400.5 @angular-devkit/build-angular 14.0.5 @angular-devkit/core 13.2.3 @angular-devkit/schematics 13.2.3 @angular/cdk 14.0.4 @angular/flex-layout 12.0.0-beta.35 @angular/material 14.0.4 @schematics/angular 13.2.3 rxjs 7.5.2 typescript 4.7.4

• Browser(s): Chrome, Firefox, Brave, Edge, Opera
• Operating System (e.g. Windows, macOS, Ubuntu): Windows