bug(mat-slide-toggle): do not leak component styles to global styles ("label:empty" selector)

[fls95]

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

v21.0.3

Description

This commit:

d313920#diff-81e2e99b447f61a58784fc026a868ad6a4b8ab7d67d769e376ae89c9b01822ae

Introduced in v21.0.4 a CSS ruleset with the intention of removing the internal label element within mat-slide-toggle from the accessibility tree, whenever that label is empty.

However, the ruleset is not nested, and because MatSlideToggle has no view encapsulation, that ruleset is "leaking", meaning that if there is an instance of it loaded, its associated style element is also loaded, making any empty label in the view affected by this instantiation process.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-bsg3h2s8?file=src%2Fmain.ts
Steps to reproduce:

1. Comment the mat-slide-toggle line in the template.
2. The label element is displayed (it is just a mock empty label element to illustrate the point).

Expected Behavior

Styles affecting generic elements (not owned by Angular Material, such as label) should not "leak" into the global styles.

Probably a solution would be to prefix that selector with .mat-mdc-slide-toggle, like:

.mat-mdc-slide-toggle label:empty {
   display: none;
}

Actual Behavior

All empty label elements are being affected right now by the aforementioned change.

Environment

• Angular: 21.1.2
• CDK/Material: 21.1.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): linux x64