mat-form-field does not display outline label properly in ShadowDom

[trungphan]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

https://stackblitz.com/edit/angular-geqne7?file=app/form-field-appearance-example.ts

Steps to reproduce:

1. Go to https://stackblitz.com/edit/angular-geqne7?file=app/form-field-appearance-example.ts
2. Select the form field and see the outline label to be under the input outline

Expected Behavior

What behavior were you expecting to see?
The label should be on top of the input outline

This is because of the condition here:

https://github.com/angular/components/blob/master/src/material/form-field/form-field.ts#L532 in the method

updateOutlineGap() {
...
    if (!document.documentElement!.contains(this._elementRef.nativeElement)) {
      this._outlineGapCalculationNeededImmediately = true;
      return;
    }
...
}

Actual Behavior

What behavior did you actually see?

Environment

• Angular: 8.2.1
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu): 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.}