Some IE11 cleanups accidentally landed in 12.2.x

[thedavids]

Reproduction

Steps to reproduce:

1. Use @angular/material version 12.2.8 or later
2. Import the MatBadgeModule in your app module
3. Create a div with a matBadge (ex: <div [matBadge]="123">Test)
4. Open in Internet Explorer to see the badge is not displayed and that there is an error in the console

It seems to be because of this line
const badges = this._elementRef.nativeElement.querySelectorAll(:scope > .${BADGE_CONTENT_CLASS});
located in this method _clearExistingBadges
In the badge component

Expected Behavior

We should see the badge correctly even in IE

Actual Behavior

The badge is not displayed and we have a syntax error in the IE console

Environment

• Angular: 12.2.8
• CDK/Material: 12.2.8
• Browser(s): Internet Explorer
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[jelbourn]

Updating this issue to cover all IE11 cleanups that accidentally landed in the 12.2.x branch. I've observed:

• .remove() in badge
• :scope in a query selector in badge

We should revert this fix on the 12.2.x branch

[jelbourn]

@Wisdomb33r I don't have access to a device with IE11 at this moment- can you provide a pointer to the block of code where the problematic remove is referenced?

[jelbourn]

@crisbeto did some digging and determined that issue related to datepicker here comes from a missing polyfill

/**
 * IE11 requires the following for NgClass support on SVG elements
 */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

Closing this since the other issue (badge) has been reverted and should be back to normal in the next patch release.

[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.}