fix(material/form-field): outline label position (#29138)

* fix(material/form-field): fix label position

When the form field is inside an overlay with ng-content or inside a side-nav (mat-drawer) the prefix container would not be visible thus the label would overlap with the prefix. In this fix we narrow down possible cases that would require an additional check for the prefix container width.

* perf(material/form-field): add caching for shadow root

Add caching for shadow root so it doesn't have to be resolved each time

src/material/form-field/form-field.ts

@@ -7,8 +7,8 @@
  */
 import {Directionality} from '@angular/cdk/bidi';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Platform} from '@angular/cdk/platform';
 import {DOCUMENT, NgTemplateOutlet} from '@angular/common';
+import {Platform, _getShadowRoot} from '@angular/cdk/platform';
 import {
  ANIMATION_MODULE_TYPE,
  AfterContentChecked,
@@ -315,6 +315,13 @@ export class MatFormField
  private _explicitFormFieldControl: MatFormFieldControl<any>;
  private _needsOutlineLabelOffsetUpdate = false;
 
+ /**
+ * Cached shadow root that the element is placed in. `null` means that the element isn't in
+ * the shadow DOM and `undefined` means that it hasn't been resolved yet. Should be read via
+ * `_getShadowRoot`, not directly.
+ */
+ private _cachedShadowRoot: ShadowRoot | null | undefined;
+
  private _injector = inject(Injector);
 
  constructor(
@@ -711,14 +718,29 @@ 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;
+ 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 &&
+ // If the rootNode is the document we need to make sure that the element is visible
+ ((rootNode === document && element.offsetParent !== null) ||
+ rootNode === this._getShadowRoot())
+ );
+ }
+
+ /**
+ * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
+ * than saving it in property directly on init, because we want to resolve it as late as possible
+ * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
+ * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
+ */
+ private _getShadowRoot(): ShadowRoot | null {
+ if (this._cachedShadowRoot === undefined) {
+ this._cachedShadowRoot = _getShadowRoot(this._elementRef.nativeElement);
  }
- // 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);
+
+ return this._cachedShadowRoot;
  }
 }