mat-form-field: ":label-shown" pseudoclass

What are you trying to do?

Hi all!

tl;dr;

Is :label-shown preudo-class used in form-field component necessary / valid? (e.g. https://github.com/angular/components/blob/master/src/material/form-field/_form-field-fill-theme.scss#L100)

Problem background

I’m trying to use polyfill for paged media (https://www.pagedmedia.org/paged-js/) in combination with "@angular/material": "12.2.4" and it complains about :

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label' is not a valid selector. at <anonymous>:1:10

Breaking it down, the only breaking part in selector is pseudo-selector “:label-shown” about which existence I’ve never heard of anywhere else.

What troubleshooting steps have you tried?

I’ve tried to filter out css styles used in my application, problem emerges when mat.core mixin is in place.

Reproduction

Steps to reproduce:

1. check https://stackblitz.com/edit/angular-ivy-24s2x2?file=src/app/app.component.scss
2. comment / uncomment mat.core in app.component.scss

Environment

• Angular: 12.1.2
• CDK/Material: 12.2.4
• Browser(s): Google Chrome Version 96.0.4664.110 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

[crisbeto]

Okay, I think I figured out what happened. We used to have :placeholder-shown in there which is an actual pseudo selector. When we changed the label/placeholder terminology in #8223, it was renamed and we didn’t notice it until now.

[angular-automatic-lock-bot[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.}