diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 0b6e02e40164..ca68a26f677a 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Directionality} from '@angular/cdk/bidi';
-import {Platform} from '@angular/cdk/platform';
+import {Platform, _getShadowRoot} from '@angular/cdk/platform';
 import {
   AfterContentChecked,
   AfterContentInit,
@@ -701,14 +701,13 @@ export class MatFormField
   /** Checks whether the form field is attached to the DOM. */
   private _isAttachedToDom(): boolean {
     const element: HTMLElement = this._elementRef.nativeElement;
-    if (element.getRootNode) {
-      const rootNode = element.getRootNode();
-      // If the element is inside the DOM the root node will be either the document
-      // or the closest shadow root, otherwise it'll be the element itself.
-      return rootNode && rootNode !== element;
-    }
-    // Otherwise fall back to checking if it's in the document. This doesn't account for
-    // shadow DOM, however browser that support shadow DOM should support `getRootNode` as well.
-    return document.documentElement!.contains(element);
+    const rootNode = element.getRootNode();
+    // If the element is inside the DOM the root node will be either the document,
+    // the closest shadow root or an element that is not yet rendered, otherwise it'll be the element itself.
+    return (
+      rootNode &&
+      rootNode !== element &&
+      (rootNode === document || rootNode === _getShadowRoot(element))
+    );
   }
 }