bug(mat-button): Ripple effect missing when using encapsulation: ShadowDom

[jdkultur]

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

When using encapsulation: ViewEncapsulation.ShadowDom in a component, the ripple effect on any material buttons is missing.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-ggkhap?file=src%2Fshadow-buttons.component.ts
Steps to reproduce:

1. click the buttons

Expected Behavior

All four buttons show a ripple effect.

Actual Behavior

Only the buttons using the default encapsulation has a ripple, and the ones in the shadow dom does not.
shadow-ripple.webm

Environment

Angular CLI: 17.3.6
Node: 18.18.0
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.6
@angular-devkit/build-angular   17.3.6
@angular-devkit/core            17.3.6
@angular-devkit/schematics      17.3.6
@schematics/angular             17.3.6
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.5

[crisbeto]

A couple of notes:

1. Our code had an issue that prevented it from working in the shadow DOM. I've sent a fix at fix(material/core): ripple loader not working in shadow DOM #29015.
2. Even once our issue is fixed, your demo won't work because the ripple structural styles (included via the mat.core mixin) need to be inside the shadow DOM. We can't do much about this so you'll have to ensure that the styles are in the correct place.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}