bug(a11y): Focus styles not applying in Shadow DOM inside an element with *ngIf

[jacobweber]

Reproduction

https://stackblitz.com/edit/angular-e7d8vq

(or use my fork of the reproduction from #19133, with an *ngIf condition wrapped around the component)

I found #19133, which looks like it was fixed in 9.2.4. But I'm still seeing the issue when the components are inside an element with *ngIf.

Steps to reproduce:

1. Create a component that uses ShadowDom
2. Create some mat-buttons, inside an element with *ngIf
3. Click one, and press tab
4. The next button doesn't receive the tab focus style

Expected Behavior

Buttons and other elements should use tab focus style (background color).

Actual Behavior

Focus styles not applied. Removing the *ngIf condition around the buttons makes it work.

Environment

• Angular: 9.2.4
• CDK/Material: 9.2.4
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[crisbeto]

The underlying issue was fixed, but the problem is that a lot of our components start monitoring focus inside their constructor which can be too early, because they haven't been put into their final place in the DOM yet. It looks like we'll have to go through all the places and move them out into ngAfterViewInit.

[ray-kay]

Would be great if this will be released soon in Version 9.2.5?
Whats the timeline?