diff --git a/src/material/autocomplete/autocomplete-trigger.ts b/src/material/autocomplete/autocomplete-trigger.ts
index 486c7a60728a..33594e257548 100644
--- a/src/material/autocomplete/autocomplete-trigger.ts
+++ b/src/material/autocomplete/autocomplete-trigger.ts
@@ -904,7 +904,8 @@ export class MatAutocompleteTrigger
       this._getConnectedElement(),
     )
       .withFlexibleDimensions(false)
-      .withPush(false);
+      .withPush(false)
+      .withPopoverLocation('inline');
 
     this._setStrategyPositions(strategy);
     this._positionStrategy = strategy;
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index c335f8e85b27..bcec42255607 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -62,6 +62,7 @@ import {
 } from './index';
 
 describe('MatAutocomplete', () => {
+  const supportsPopover = 'showPopover' in document.body;
   let overlayContainerElement: HTMLElement;
 
   // Creates a test component fixture.
@@ -77,6 +78,19 @@ describe('MatAutocomplete', () => {
     return TestBed.createComponent<T>(component);
   }
 
+  function getOverlayHost(fixture: ComponentFixture<unknown>): HTMLElement | null {
+    return supportsPopover
+      ? fixture.nativeElement.querySelector('.cdk-overlay-popover')
+      : overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box');
+  }
+
+  function getBackdrop(fixture: ComponentFixture<unknown>): HTMLElement | null {
+    const selector = '.cdk-overlay-backdrop';
+    return supportsPopover
+      ? getOverlayHost(fixture)?.querySelector(selector) || null
+      : overlayContainerElement.querySelector(selector);
+  }
+
   describe('panel toggling', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
@@ -98,10 +112,10 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected panel state to read open when input is focused.`)
         .toBe(true);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when input is focused.`)
         .toContain('Alabama');
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when input is focused.`)
         .toContain('California');
     });
@@ -147,10 +161,10 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected panel state to read open when opened programmatically.`)
         .toBe(true);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when opened programmatically.`)
         .toContain('Alabama');
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when opened programmatically.`)
         .toContain('California');
     });
@@ -165,9 +179,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking outside the panel to set its state to closed.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected clicking outside the panel to close the panel.`)
-        .toEqual('');
+        .toBeFalsy();
     }));
 
     it('should close the panel when the user clicks away via auxiliary button', waitForAsync(async () => {
@@ -180,9 +194,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking outside the panel to set its state to closed.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected clicking outside the panel to close the panel.`)
-        .toEqual('');
+        .toBeFalsy();
     }));
 
     it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
@@ -194,9 +208,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected tapping outside the panel to set its state to closed.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected tapping outside the panel to close the panel.`)
-        .toEqual('');
+        .toBeFalsy();
     }));
 
     it('should close the panel when an option is clicked', waitForAsync(async () => {
@@ -204,7 +218,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+      const option = getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement;
       option.click();
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
@@ -212,9 +226,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking an option to set the panel state to closed.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected clicking an option to close the panel.`)
-        .toEqual('');
+        .toBeFalsy();
     }));
 
     it('should close the panel when a newly created option is clicked', waitForAsync(async () => {
@@ -227,7 +241,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      let options = overlayContainerElement.querySelectorAll(
+      let options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[0].click();
@@ -240,7 +254,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+      options = getOverlayHost(fixture)!.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
@@ -248,9 +262,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected clicking a new option to set the panel state to closed.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected clicking a new option to close the panel.`)
-        .toEqual('');
+        .toBeFalsy();
     }));
 
     it('should close the panel programmatically', fakeAsync(() => {
@@ -264,9 +278,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected closing programmatically to set the panel state to closed.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected closing programmatically to close the panel.`)
-        .toEqual('');
+        .toBeFalsy();
     }));
 
     it('should not throw when attempting to close the panel of a destroyed autocomplete', () => {
@@ -283,7 +297,7 @@ describe('MatAutocomplete', () => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
 
-      const panel = overlayContainerElement.querySelector(
+      const panel = getOverlayHost(fixture)!.querySelector(
         '.mat-mdc-autocomplete-panel',
       ) as HTMLElement;
 
@@ -311,7 +325,7 @@ describe('MatAutocomplete', () => {
       await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -349,7 +363,7 @@ describe('MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -373,7 +387,7 @@ describe('MatAutocomplete', () => {
       flush();
       fixture.detectChanges();
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -390,7 +404,7 @@ describe('MatAutocomplete', () => {
       tick();
       fixture.detectChanges();
 
-      expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!.classList)
+      expect(getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!.classList)
         .withContext('Expected panel to be visible.')
         .toContain('mat-mdc-autocomplete-visible');
 
@@ -399,7 +413,7 @@ describe('MatAutocomplete', () => {
       tick();
       fixture.detectChanges();
 
-      expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!.classList)
+      expect(getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!.classList)
         .withContext('Expected panel to be hidden.')
         .toContain('mat-mdc-autocomplete-hidden');
 
@@ -415,7 +429,7 @@ describe('MatAutocomplete', () => {
       tick();
       fixture.detectChanges();
 
-      expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!.classList)
+      expect(getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!.classList)
         .withContext('Expected panel to be visible.')
         .toContain('mat-mdc-autocomplete-visible');
     }));
@@ -639,10 +653,7 @@ describe('MatAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    const boundingBox = overlayContainerElement.querySelector(
-      '.cdk-overlay-connected-position-bounding-box',
-    )!;
-    expect(boundingBox.getAttribute('dir')).toEqual('rtl');
+    expect(getOverlayHost(rtlFixture)?.getAttribute('dir')).toEqual('rtl');
   });
 
   it('should update the panel direction if it changes for the trigger', () => {
@@ -653,10 +664,7 @@ describe('MatAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    let boundingBox = overlayContainerElement.querySelector(
-      '.cdk-overlay-connected-position-bounding-box',
-    )!;
-    expect(boundingBox.getAttribute('dir')).toEqual('rtl');
+    expect(getOverlayHost(rtlFixture)?.getAttribute('dir')).toEqual('rtl');
 
     rtlFixture.componentInstance.trigger.closePanel();
     rtlFixture.detectChanges();
@@ -665,10 +673,7 @@ describe('MatAutocomplete', () => {
     rtlFixture.componentInstance.trigger.openPanel();
     rtlFixture.detectChanges();
 
-    boundingBox = overlayContainerElement.querySelector(
-      '.cdk-overlay-connected-position-bounding-box',
-    )!;
-    expect(boundingBox.getAttribute('dir')).toEqual('ltr');
+    expect(getOverlayHost(rtlFixture)?.getAttribute('dir')).toEqual('ltr');
   });
 
   it('should be able to set a custom value for the `autocomplete` attribute', () => {
@@ -700,7 +705,7 @@ describe('MatAutocomplete', () => {
     await new Promise(r => setTimeout(r));
 
     // Select an option and reopen the panel.
-    (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+    (getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement).click();
     fixture.detectChanges();
     await new Promise(r => setTimeout(r));
     fixture.detectChanges();
@@ -731,7 +736,7 @@ describe('MatAutocomplete', () => {
     await new Promise(r => setTimeout(r));
 
     // Select an option and reopen the panel.
-    (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+    (getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement).click();
     fixture.detectChanges();
     await new Promise(r => setTimeout(r));
     fixture.detectChanges();
@@ -799,7 +804,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -815,7 +820,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -836,7 +841,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -857,7 +862,7 @@ describe('MatAutocomplete', () => {
       fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -898,7 +903,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       const clickedOption = options[0];
@@ -965,7 +970,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[1].click();
@@ -1037,7 +1042,7 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
-      const panel = overlayContainerElement.querySelector(
+      const panel = getOverlayHost(fixture)!.querySelector(
         '.mat-mdc-autocomplete-panel',
       )! as HTMLElement;
       expect(panel.classList).toContain('mat-warn');
@@ -1078,17 +1083,17 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected panel state to stay open when DOWN key is pressed.`)
         .toBe(true);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to keep displaying when DOWN key is pressed.`)
         .toContain('Alabama');
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to keep displaying when DOWN key is pressed.`)
         .toContain('California');
     });
 
     it('should set the active item to the first option when DOWN key is pressed', () => {
       const componentInstance = fixture.componentInstance;
-      const optionEls = overlayContainerElement.querySelectorAll(
+      const optionEls = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
 
@@ -1117,7 +1122,7 @@ describe('MatAutocomplete', () => {
 
     it('should set the active item to the last option when UP key is pressed', () => {
       const componentInstance = fixture.componentInstance;
-      const optionEls = overlayContainerElement.querySelectorAll(
+      const optionEls = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
 
@@ -1160,7 +1165,7 @@ describe('MatAutocomplete', () => {
       componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
 
-      const optionEls = overlayContainerElement.querySelectorAll(
+      const optionEls = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
 
@@ -1272,9 +1277,9 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected panel state to read closed after ENTER key.`)
         .toBe(false);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture))
         .withContext(`Expected panel to close after ENTER key.`)
-        .toEqual('');
+        .toBeFalsy();
 
       dispatchFakeEvent(input, 'focusin');
       clearElement(input);
@@ -1285,7 +1290,7 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected panel state to read open when typing in input.`)
         .toBe(true);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when typing in input.`)
         .toContain('Alabama');
     }));
@@ -1511,7 +1516,7 @@ describe('MatAutocomplete', () => {
       input.focus();
       flush();
 
-      expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel'))
+      expect(getOverlayHost(fixture)?.querySelector('.mat-mdc-autocomplete-panel'))
         .withContext('Expected panel to be rendered.')
         .toBeTruthy();
 
@@ -1519,7 +1524,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       tick();
 
-      expect(overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel'))
+      expect(getOverlayHost(fixture)?.querySelector('.mat-mdc-autocomplete-panel'))
         .withContext('Expected panel to be removed.')
         .toBeFalsy();
     }));
@@ -1979,7 +1984,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+      const option = getOverlayHost(fixture)?.querySelector('mat-option') as HTMLElement;
 
       // Focus the option manually since the synthetic click may not do it.
       option.focus();
@@ -2015,7 +2020,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
@@ -2048,7 +2053,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
@@ -2074,7 +2079,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
-      const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
@@ -2104,7 +2109,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      let panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       let initialPanelHeight = panel.getBoundingClientRect().height;
 
       fixture.componentInstance.trigger.closePanel();
@@ -2120,7 +2125,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
 
       expect(panel.getBoundingClientRect().height).toBeGreaterThan(initialPanelHeight);
     }));
@@ -2145,7 +2150,7 @@ describe('MatAutocomplete', () => {
       await new Promise(r => setTimeout(r));
 
       const inputTop = inputReference.getBoundingClientRect().top;
-      const panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
@@ -2175,7 +2180,7 @@ describe('MatAutocomplete', () => {
         await new Promise(r => setTimeout(r));
         fixture.detectChanges();
 
-        let panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
+        let panel = getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!;
         let inputRect = inputReference.getBoundingClientRect();
         let panelRect = panel.getBoundingClientRect();
 
@@ -2226,7 +2231,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
@@ -2253,7 +2258,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       const inputTop = inputReference.getBoundingClientRect().top;
-      const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       const panelBottom = panel.getBoundingClientRect().bottom;
 
       expect(Math.floor(inputTop))
@@ -2280,7 +2285,7 @@ describe('MatAutocomplete', () => {
       await openPanel();
 
       let inputRect = inputReference.getBoundingClientRect();
-      let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      let panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       let panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(inputRect.top))
@@ -2297,7 +2302,7 @@ describe('MatAutocomplete', () => {
       await openPanel();
 
       inputRect = inputReference.getBoundingClientRect();
-      panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+      panel = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!;
       panelRect = panel.getBoundingClientRect();
 
       expect(Math.floor(inputRect.bottom))
@@ -2320,7 +2325,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      let options = overlayContainerElement.querySelectorAll(
+      let options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[0].click();
@@ -2337,7 +2342,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+      options = getOverlayHost(fixture)!.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
 
@@ -2354,7 +2359,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      let options = overlayContainerElement.querySelectorAll(
+      let options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[0].click();
@@ -2373,7 +2378,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+      options = getOverlayHost(fixture)!.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
 
@@ -2389,7 +2394,7 @@ describe('MatAutocomplete', () => {
       await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
-      expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
+      expect(getOverlayHost(fixture)!.querySelectorAll('mat-option')[0].classList)
         .withContext('Expected first option to be highlighted.')
         .toContain('mat-mdc-option-active');
     }));
@@ -2407,7 +2412,7 @@ describe('MatAutocomplete', () => {
         await new Promise(r => setTimeout(r));
         fixture.detectChanges();
 
-        expect(overlayContainerElement.querySelectorAll('mat-option')[2].classList)
+        expect(getOverlayHost(fixture)!.querySelectorAll('mat-option')[2].classList)
           .withContext('Expected third option to be highlighted.')
           .toContain('mat-mdc-option-active');
       }),
@@ -2424,7 +2429,7 @@ describe('MatAutocomplete', () => {
       await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
-      const selectedOptions = overlayContainerElement.querySelectorAll(
+      const selectedOptions = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option.mat-mdc-option-active',
       );
       expect(selectedOptions.length).withContext('expected no options to be active').toBe(0);
@@ -2469,7 +2474,7 @@ describe('MatAutocomplete', () => {
       // Note: should not have a detectChanges call here
       // in order for the test to fail when it's supposed to.
 
-      expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
+      expect(getOverlayHost(fixture)!.querySelectorAll('mat-option')[0].classList)
         .withContext('Expected first option to be highlighted.')
         .toContain('mat-mdc-option-active');
     }));
@@ -2487,7 +2492,7 @@ describe('MatAutocomplete', () => {
       await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
-      expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
+      expect(getOverlayHost(fixture)!.querySelectorAll('mat-option')[0].classList)
         .withContext('Expected first option to be highlighted.')
         .toContain('mat-mdc-option-active');
     }));
@@ -2509,7 +2514,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+      const option = getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement;
 
       option.click();
       fixture.detectChanges();
@@ -2527,7 +2532,7 @@ describe('MatAutocomplete', () => {
         fixture.componentInstance.trigger.openPanel();
         fixture.detectChanges();
         await new Promise(r => setTimeout(r));
-        (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+        (getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement).click();
         fixture.detectChanges();
         await new Promise(r => setTimeout(r));
       };
@@ -2580,7 +2585,7 @@ describe('MatAutocomplete', () => {
       await flushPosition();
 
       const inputBottom = inputReference.getBoundingClientRect().bottom;
-      const panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!;
       const panelTop = panel.getBoundingClientRect().top;
 
       expect(Math.floor(inputBottom))
@@ -2604,7 +2609,7 @@ describe('MatAutocomplete', () => {
       await new Promise(r => setTimeout(r));
 
       const input = fixture.nativeElement.querySelector('input');
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+      const option = getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement;
       const optionInstance = fixture.componentInstance.options.first;
       const spy = jasmine.createSpy('selectionChange spy');
 
@@ -2644,7 +2649,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       const spy = jasmine.createSpy('optionSelected spy');
@@ -2677,7 +2682,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       const spy = jasmine.createSpy('optionSelected spy');
@@ -2837,7 +2842,7 @@ describe('MatAutocomplete', () => {
       trigger.openPanel();
       fixture.detectChanges();
       await new Promise(r => setTimeout(r));
-      (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+      (getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement).click();
       await new Promise(r => setTimeout(r));
       fixture.detectChanges();
 
@@ -2928,7 +2933,7 @@ describe('MatAutocomplete', () => {
     }));
 
     it('should emit panel close event when selecting an option', () => {
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+      const option = getOverlayHost(fixture)!.querySelector('mat-option') as HTMLElement;
 
       expect(closingActionSpy).not.toHaveBeenCalled();
       option.click();
@@ -2987,7 +2992,7 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
-      const panelClassList = overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
+      const panelClassList = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!.classList;
       expect(panelClassList).toContain('default1');
     });
 
@@ -3003,7 +3008,7 @@ describe('MatAutocomplete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
-      const panelClassList = overlayContainerElement.querySelector('.cdk-overlay-pane')!.classList;
+      const panelClassList = getOverlayHost(fixture)!.querySelector('.cdk-overlay-pane')!.classList;
       expect(panelClassList).toContain('default1');
       expect(panelClassList).toContain('default2');
     });
@@ -3018,7 +3023,7 @@ describe('MatAutocomplete', () => {
 
       tick(500);
 
-      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
+      expect(getBackdrop(fixture)).toBeFalsy();
     }));
 
     it('should be able to add the backdrop using hasBackdrop option', fakeAsync(() => {
@@ -3034,7 +3039,7 @@ describe('MatAutocomplete', () => {
 
       tick(500);
 
-      expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+      expect(getBackdrop(fixture)).toBeTruthy();
     }));
   });
 
@@ -3052,8 +3057,8 @@ describe('MatAutocomplete', () => {
 
       tick(500);
 
-      const cdkPanelElement = overlayContainerElement.querySelector('.cdk-overlay-backdrop');
-      expect(cdkPanelElement?.classList).toContain('my-custom-backdrop-class');
+      const backdrop = getBackdrop(fixture);
+      expect(backdrop?.classList).toContain('my-custom-backdrop-class');
     }));
   });
 
@@ -3067,7 +3072,7 @@ describe('MatAutocomplete', () => {
         typeInElement(input, 'd');
         fixture.detectChanges();
 
-        const options = overlayContainerElement.querySelectorAll(
+        const options = getOverlayHost(fixture)!.querySelectorAll(
           'mat-option',
         ) as NodeListOf<HTMLElement>;
         expect(options.length).toBe(1);
@@ -3102,10 +3107,10 @@ describe('MatAutocomplete', () => {
       expect(fixture.componentInstance.trigger.panelOpen)
         .withContext(`Expected panel state to read open when input is focused.`)
         .toBe(true);
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when input is focused.`)
         .toContain('One');
-      expect(overlayContainerElement.textContent)
+      expect(getOverlayHost(fixture)?.textContent)
         .withContext(`Expected panel to display when input is focused.`)
         .toContain('Two');
     });
@@ -3155,7 +3160,7 @@ describe('MatAutocomplete', () => {
       fixture.detectChanges();
 
       const autocomplete = fixture.debugElement.nativeElement.querySelector('mat-autocomplete');
-      const panel = overlayContainerElement.querySelector('.mat-mdc-autocomplete-panel')!;
+      const panel = getOverlayHost(fixture)!.querySelector('.mat-mdc-autocomplete-panel')!;
 
       expect(autocomplete.classList).not.toContain('class-one');
       expect(autocomplete.classList).not.toContain('class-two');
@@ -3172,7 +3177,7 @@ describe('MatAutocomplete', () => {
       tick();
       fixture.detectChanges();
 
-      const classList = overlayContainerElement.querySelector(
+      const classList = getOverlayHost(fixture)!.querySelector(
         '.mat-mdc-autocomplete-panel',
       )!.classList;
 
@@ -3478,7 +3483,7 @@ describe('MatAutocomplete', () => {
       expect(stateCtrl.value).toBeFalsy();
       expect(input.value).toBe('Alabama');
 
-      const options = overlayContainerElement.querySelectorAll(
+      const options = getOverlayHost(fixture)!.querySelectorAll(
         'mat-option',
       ) as NodeListOf<HTMLElement>;
       options[2].click();
@@ -3498,7 +3503,9 @@ describe('MatAutocomplete', () => {
     widthFixture.componentInstance.trigger.openPanel();
     widthFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    const overlayPane = getOverlayHost(widthFixture)!.querySelector(
+      '.cdk-overlay-pane',
+    ) as HTMLElement;
     // Firefox, Edge return a decimal value for width, so we need to parse and round it to verify
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(300);
 
@@ -3526,7 +3533,9 @@ describe('MatAutocomplete', () => {
     widthFixture.componentInstance.trigger.openPanel();
     widthFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    const overlayPane = getOverlayHost(widthFixture)!.querySelector(
+      '.cdk-overlay-pane',
+    ) as HTMLElement;
     const input = widthFixture.debugElement.query(By.css('input'))!.nativeElement;
 
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(300);
@@ -3582,7 +3591,9 @@ describe('MatAutocomplete', () => {
     widthFixture.componentInstance.trigger.openPanel();
     widthFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    const overlayPane = getOverlayHost(widthFixture)!.querySelector(
+      '.cdk-overlay-pane',
+    ) as HTMLElement;
 
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(300);
 
@@ -3606,7 +3617,9 @@ describe('MatAutocomplete', () => {
     widthFixture.componentInstance.trigger.openPanel();
     widthFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    const overlayPane = getOverlayHost(widthFixture)!.querySelector(
+      '.cdk-overlay-pane',
+    ) as HTMLElement;
 
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(300);
   });
@@ -3623,7 +3636,9 @@ describe('MatAutocomplete', () => {
     widthFixture.componentInstance.trigger.openPanel();
     widthFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    const overlayPane = getOverlayHost(widthFixture)!.querySelector(
+      '.cdk-overlay-pane',
+    ) as HTMLElement;
 
     expect(overlayPane.style.width).toBe('auto');
   });
@@ -3640,7 +3655,9 @@ describe('MatAutocomplete', () => {
     widthFixture.componentInstance.trigger.openPanel();
     widthFixture.detectChanges();
 
-    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+    const overlayPane = getOverlayHost(widthFixture)!.querySelector(
+      '.cdk-overlay-pane',
+    ) as HTMLElement;
 
     expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(400);
   });
@@ -3656,7 +3673,7 @@ describe('MatAutocomplete', () => {
     tick();
 
     Promise.resolve().then(() => {
-      let panel = overlayContainerElement.querySelector(
+      let panel = getOverlayHost(fixture)!.querySelector(
         '.mat-mdc-autocomplete-panel',
       ) as HTMLElement;
       let visibleClass = 'mat-mdc-autocomplete-visible';
@@ -3675,7 +3692,9 @@ describe('MatAutocomplete', () => {
     await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
-    let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+    let options = getOverlayHost(fixture)!.querySelectorAll(
+      'mat-option',
+    ) as NodeListOf<HTMLElement>;
     let spy = fixture.componentInstance.optionSelected;
 
     options[1].click();
@@ -3700,7 +3719,7 @@ describe('MatAutocomplete', () => {
     await new Promise(r => setTimeout(r));
     fixture.detectChanges();
 
-    const options = overlayContainerElement.querySelectorAll(
+    const options = getOverlayHost(fixture)!.querySelectorAll(
       'mat-option',
     ) as NodeListOf<HTMLElement>;
     spyOn(input, 'focus').and.callFake(() => events.push('focus'));
@@ -3727,7 +3746,9 @@ describe('MatAutocomplete', () => {
     tick();
     fixture.detectChanges();
 
-    let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+    let options = getOverlayHost(fixture)!.querySelectorAll(
+      'mat-option',
+    ) as NodeListOf<HTMLElement>;
     let spy = fixture.componentInstance.optionSelected;
 
     options[3].click();
@@ -3803,7 +3824,7 @@ describe('MatAutocomplete', () => {
     fixture.detectChanges();
     await new Promise(r => setTimeout(r));
 
-    const overlayRect = overlayContainerElement
+    const overlayRect = getOverlayHost(fixture)!
       .querySelector('.cdk-overlay-pane')!
       .getBoundingClientRect();
     const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
@@ -3832,7 +3853,7 @@ describe('MatAutocomplete', () => {
     fixture.detectChanges();
     await new Promise(r => setTimeout(r));
 
-    const overlayRect = overlayContainerElement
+    const overlayRect = getOverlayHost(fixture)!
       .querySelector('.cdk-overlay-pane')!
       .getBoundingClientRect();
     const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();