|
7 | 7 | */
|
8 | 8 | import {Directionality} from '@angular/cdk/bidi';
|
9 | 9 | import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
|
| 10 | +import {Platform} from '@angular/cdk/platform'; |
10 | 11 | import {DOCUMENT, NgTemplateOutlet} from '@angular/common';
|
11 |
| -import {Platform, _getShadowRoot} from '@angular/cdk/platform'; |
12 | 12 | import {
|
13 | 13 | ANIMATION_MODULE_TYPE,
|
14 | 14 | AfterContentChecked,
|
@@ -315,13 +315,6 @@ export class MatFormField
|
315 | 315 | private _explicitFormFieldControl: MatFormFieldControl<any>;
|
316 | 316 | private _needsOutlineLabelOffsetUpdate = false;
|
317 | 317 |
|
318 |
| - /** |
319 |
| - * Cached shadow root that the element is placed in. `null` means that the element isn't in |
320 |
| - * the shadow DOM and `undefined` means that it hasn't been resolved yet. Should be read via |
321 |
| - * `_getShadowRoot`, not directly. |
322 |
| - */ |
323 |
| - private _cachedShadowRoot: ShadowRoot | null | undefined; |
324 |
| - |
325 | 318 | private _injector = inject(Injector);
|
326 | 319 |
|
327 | 320 | constructor(
|
@@ -718,29 +711,14 @@ export class MatFormField
|
718 | 711 | /** Checks whether the form field is attached to the DOM. */
|
719 | 712 | private _isAttachedToDom(): boolean {
|
720 | 713 | const element: HTMLElement = this._elementRef.nativeElement;
|
721 |
| - const rootNode = element.getRootNode(); |
722 |
| - // If the element is inside the DOM the root node will be either the document, |
723 |
| - // the closest shadow root or an element that is not yet rendered, otherwise it'll be the element itself. |
724 |
| - return ( |
725 |
| - rootNode && |
726 |
| - rootNode !== element && |
727 |
| - // If the rootNode is the document we need to make sure that the element is visible |
728 |
| - ((rootNode === document && element.offsetParent !== null) || |
729 |
| - rootNode === this._getShadowRoot()) |
730 |
| - ); |
731 |
| - } |
732 |
| - |
733 |
| - /** |
734 |
| - * Lazily resolves and returns the shadow root of the element. We do this in a function, rather |
735 |
| - * than saving it in property directly on init, because we want to resolve it as late as possible |
736 |
| - * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the |
737 |
| - * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`. |
738 |
| - */ |
739 |
| - private _getShadowRoot(): ShadowRoot | null { |
740 |
| - if (this._cachedShadowRoot === undefined) { |
741 |
| - this._cachedShadowRoot = _getShadowRoot(this._elementRef.nativeElement); |
| 714 | + if (element.getRootNode) { |
| 715 | + const rootNode = element.getRootNode(); |
| 716 | + // If the element is inside the DOM the root node will be either the document |
| 717 | + // or the closest shadow root, otherwise it'll be the element itself. |
| 718 | + return rootNode && rootNode !== element; |
742 | 719 | }
|
743 |
| - |
744 |
| - return this._cachedShadowRoot; |
| 720 | + // Otherwise fall back to checking if it's in the document. This doesn't account for |
| 721 | + // shadow DOM, however browser that support shadow DOM should support `getRootNode` as well. |
| 722 | + return document.documentElement!.contains(element); |
745 | 723 | }
|
746 | 724 | }
|
0 commit comments