fix(autocomplete): incorrectly detecting shadow DOM when inserted through an embedded view

When an autocomplete is inserted, we try to figure out whether it's in the shadow DOM so that we can handle outside clicks properly. It seems like our logic can run too early in some cases, causing it to be detected incorrectly. These changes move the logic later in the process, right before the overlay is attached to the DOM.

Fixes #19330.

Author: crisbeto

src/material/autocomplete/autocomplete-trigger.ts

@@ -228,11 +228,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
     const window = this._getWindow();
 
     if (typeof window !== 'undefined') {
-      this._zone.runOutsideAngular(() => {
-        window.addEventListener('blur', this._windowBlurHandler);
-      });
-
-      this._isInsideShadowRoot = !!_getShadowRoot(this._element.nativeElement);
+      this._zone.runOutsideAngular(() => window.addEventListener('blur', this._windowBlurHandler));
     }
   }
 
@@ -619,6 +615,12 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, AfterViewIn
       throw getMatAutocompleteMissingPanelError();
     }
 
+    // We want to resolve this once, as late as possible so that we can be
+    // sure that the element has been moved into its final place in the DOM.
+    if (this._isInsideShadowRoot == null) {
+      this._isInsideShadowRoot = !!_getShadowRoot(this._element.nativeElement);
+    }
+
     let overlayRef = this._overlayRef;
 
     if (!overlayRef) {