bug(DatePicker): Focus Handling does not work with Shadow DOM

[ghost]

Reproduction

Stackblitz Demo: https://stackblitz.com/edit/components-issue-mlorwc?file=src/app/example-component.html
GitHub Repo: https://github.com/zie-rts/mat-datepicker-shadow-dom

The Stackblitz demo does not use custom elements (it did not work) and does not have any styling.
The GitHub repo uses custom elements, has some styling and also shows that the element is focused.

Steps to reproduce:

1. Open the stackblitz demo or clone the github repo (and run npm i + npm start)
2. Click on the datepicker button to open the calendar
3. Click on a date (the calender will be closed)

Step 2/3: Instead of clicking the datepicker button you can also focus the input element and press Alt+Arrow Down to open the calender and use the keyboard to select a date.

Expected Behavior

The previous focused element should be focused again.
That's either the datepicker button or the input element.

Actual Behavior

Angular Material sets the focus to the element that was previously focused.
If the datepicker field is used inside Shadow DOM the shadow root element will be focused. As this will not be focusable most of the time the body element will receive the focus. If we set tabindex="-1" on the element we can see that the element gets the focus (see GitHub repo).

Environment

• Angular: 11.1.1
• CDK/Material: 11.1.1
• Browser(s): Chrome
• Operating System: macOS

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