diff --git a/src/cdk-experimental/dialog/dialog-container.ts b/src/cdk-experimental/dialog/dialog-container.ts
index 4049e1234920..b07891e368f7 100644
--- a/src/cdk-experimental/dialog/dialog-container.ts
+++ b/src/cdk-experimental/dialog/dialog-container.ts
@@ -12,7 +12,8 @@ import {
   BasePortalOutlet,
   ComponentPortal,
   PortalHostDirective,
-  TemplatePortal
+  TemplatePortal,
+  DomPortal
 } from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
 import {
@@ -176,6 +177,19 @@ export class CdkDialogContainer extends BasePortalOutlet implements OnDestroy {
     return this._portalHost.attachTemplatePortal(portal);
   }
 
+  /**
+   * Attaches a DOM portal to the dialog container.
+   * @param portal Portal to be attached.
+   */
+  attachDomPortal(portal: DomPortal) {
+    if (this._portalHost.hasAttached()) {
+      throwDialogContentAlreadyAttachedError();
+    }
+
+    this._savePreviouslyFocusedElement();
+    return this._portalHost.attachDomPortal(portal);
+  }
+
   /** Emit lifecycle events based on animation `start` callback. */
   _onAnimationStart(event: AnimationEvent) {
     if (event.toState === 'enter') {
diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts
index c360c50bea7c..cb95122d28f6 100644
--- a/src/cdk/overlay/overlay-directives.ts
+++ b/src/cdk/overlay/overlay-directives.ts
@@ -9,7 +9,7 @@
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ESCAPE} from '@angular/cdk/keycodes';
-import {TemplatePortal} from '@angular/cdk/portal';
+import {TemplatePortal, Portal} from '@angular/cdk/portal';
 import {
   Directive,
   ElementRef,
@@ -104,7 +104,6 @@ export class CdkOverlayOrigin {
 })
 export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _overlayRef: OverlayRef;
-  private _templatePortal: TemplatePortal;
   private _hasBackdrop = false;
   private _lockPosition = false;
   private _growAfterOpen = false;
@@ -198,6 +197,12 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   get push() { return this._push; }
   set push(value: boolean) { this._push = coerceBooleanProperty(value); }
 
+  /**
+   * Portal that should be projected into the overlay. If none is provided, one will be
+   * created automatically from the overlay element's content.
+   */
+  @Input('cdkConnectedOverlayPortal') portal: Portal<any>;
+
   /** Event emitted when the backdrop is clicked. */
   @Output() backdropClick = new EventEmitter<MouseEvent>();
 
@@ -217,11 +222,10 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   constructor(
       private _overlay: Overlay,
-      templateRef: TemplateRef<any>,
-      viewContainerRef: ViewContainerRef,
+      private _templateRef: TemplateRef<any>,
+      private _viewContainerRef: ViewContainerRef,
       @Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) scrollStrategyFactory: any,
       @Optional() private _dir: Directionality) {
-    this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
     this._scrollStrategyFactory = scrollStrategyFactory;
     this.scrollStrategy = this._scrollStrategyFactory();
   }
@@ -359,8 +363,12 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
     }
 
+    if (!this.portal) {
+      this.portal = new TemplatePortal(this._templateRef, this._viewContainerRef);
+    }
+
     if (!this._overlayRef.hasAttached()) {
-      this._overlayRef.attach(this._templatePortal);
+      this._overlayRef.attach(this.portal);
       this.attach.emit();
     }
 
diff --git a/src/cdk/portal/dom-portal-outlet.ts b/src/cdk/portal/dom-portal-outlet.ts
index d7eaadc79ed1..028bc32dbcad 100644
--- a/src/cdk/portal/dom-portal-outlet.ts
+++ b/src/cdk/portal/dom-portal-outlet.ts
@@ -13,7 +13,7 @@ import {
   ApplicationRef,
   Injector,
 } from '@angular/core';
-import {BasePortalOutlet, ComponentPortal, TemplatePortal} from './portal';
+import {BasePortalOutlet, ComponentPortal, TemplatePortal, DomPortal} from './portal';
 
 
 /**
@@ -93,6 +93,28 @@ export class DomPortalOutlet extends BasePortalOutlet {
     return viewRef;
   }
 
+  /**
+   * Attaches a DOM portal by transferring its content into the outlet.
+   * @param portal Portal to be attached.
+   */
+  attachDomPortal(portal: DomPortal) {
+    // Note that we need to convert this into an array, because `childNodes`
+    // is a live collection which will be updated as we add/remove nodes.
+    let transferredNodes = Array.from(portal.element.childNodes);
+
+    for (let i = 0; i < transferredNodes.length; i++) {
+      this.outletElement.appendChild(transferredNodes[i]);
+    }
+
+    super.setDisposeFn(() => {
+      for (let i = 0; i < transferredNodes.length; i++) {
+        portal.element.appendChild(transferredNodes[i]);
+      }
+
+      transferredNodes = null!;
+    });
+  }
+
   /**
    * Clears out a portal from the DOM.
    */
diff --git a/src/cdk/portal/portal-directives.ts b/src/cdk/portal/portal-directives.ts
index fab3606fc848..62f91d11ca81 100644
--- a/src/cdk/portal/portal-directives.ts
+++ b/src/cdk/portal/portal-directives.ts
@@ -19,7 +19,7 @@ import {
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
-import {BasePortalOutlet, ComponentPortal, Portal, TemplatePortal} from './portal';
+import {BasePortalOutlet, ComponentPortal, Portal, TemplatePortal, DomPortal} from './portal';
 
 
 /**
@@ -141,7 +141,7 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
   }
 
   /**
-   * Attach the given TemplatePortal to this PortlHost as an embedded View.
+   * Attach the given TemplatePortal to this PortalHost as an embedded View.
    * @param portal Portal to be attached.
    * @returns Reference to the created embedded view.
    */
@@ -156,6 +156,29 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
 
     return viewRef;
   }
+
+  /**
+   * Attaches the given DomPortal to this PortalHost by moving all of the portal content into it.
+   * @param portal Portal to be attached.
+   */
+  attachDomPortal(portal: DomPortal) {
+    portal.setAttachedHost(this);
+
+    const origin = portal.element;
+    const transferredNodes: Node[] = [];
+    const nativeElement: Node = this._viewContainerRef.element.nativeElement;
+    const rootNode = nativeElement.nodeType === nativeElement.ELEMENT_NODE ?
+        nativeElement : nativeElement.parentNode!;
+
+    while (origin.firstChild) {
+      transferredNodes.push(rootNode.appendChild(origin.firstChild));
+    }
+
+    super.setDisposeFn(() => {
+      transferredNodes.forEach(node => portal.element.appendChild(node));
+      transferredNodes.length = 0;
+    });
+  }
 }
 
 
diff --git a/src/cdk/portal/portal.spec.ts b/src/cdk/portal/portal.spec.ts
index 6b42ed759f81..b047bfa46ec2 100644
--- a/src/cdk/portal/portal.spec.ts
+++ b/src/cdk/portal/portal.spec.ts
@@ -12,10 +12,11 @@ import {
   ApplicationRef,
   TemplateRef,
   ComponentRef,
+  ElementRef,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {CdkPortal, CdkPortalOutlet, PortalModule} from './portal-directives';
-import {Portal, ComponentPortal, TemplatePortal} from './portal';
+import {Portal, ComponentPortal, TemplatePortal, DomPortal} from './portal';
 import {DomPortalOutlet} from './dom-portal-outlet';
 
 
@@ -76,6 +77,35 @@ describe('Portals', () => {
           .toHaveBeenCalledWith(testAppComponent.portalOutlet.attachedRef);
     });
 
+    it('should load a DOM portal', () => {
+      const testAppComponent = fixture.componentInstance;
+      const hostContainer = fixture.nativeElement.querySelector('.portal-container');
+      const innerContent = fixture.nativeElement.querySelector('.dom-portal-inner-content');
+      const domPortal = new DomPortal(testAppComponent.domPortalContent);
+
+      expect(innerContent).toBeTruthy('Expected portal content to be rendered.');
+      expect(domPortal.element.contains(innerContent))
+          .toBe(true, 'Expected content to be inside portal on init.');
+      expect(hostContainer.contains(innerContent))
+          .toBe(false, 'Expected content to be outside of portal outlet.');
+
+      testAppComponent.selectedPortal = domPortal;
+      fixture.detectChanges();
+
+      expect(domPortal.element.contains(innerContent))
+          .toBe(false, 'Expected content to be out of the portal on attach.');
+      expect(hostContainer.contains(innerContent))
+          .toBe(true, 'Expected content to be inside the outlet on attach.');
+
+      testAppComponent.selectedPortal = undefined;
+      fixture.detectChanges();
+
+      expect(domPortal.element.contains(innerContent))
+          .toBe(true, 'Expected content to be at initial position on detach.');
+      expect(hostContainer.contains(innerContent))
+          .toBe(false, 'Expected content to be removed from outlet on detach.');
+    });
+
     it('should project template context bindings in the portal', () => {
       let testAppComponent = fixture.componentInstance;
       let hostContainer = fixture.nativeElement.querySelector('.portal-container');
@@ -502,6 +532,16 @@ describe('Portals', () => {
       expect(spy).toHaveBeenCalled();
     });
 
+    it('should attach and detach a DOM portal', () => {
+      const fixture = TestBed.createComponent(PortalTestApp);
+      fixture.detectChanges();
+      const portal = new DomPortal(fixture.componentInstance.domPortalContent);
+
+      portal.attach(host);
+
+      expect(someDomElement.textContent).toContain('Hello there');
+    });
+
   });
 });
 
@@ -559,12 +599,17 @@ class ArbitraryViewContainerRefComponent {
   </ng-template>
 
   <ng-template #templateRef let-data> {{fruit}} - {{ data?.status }}!</ng-template>
+
+  <div #domPortalContent>
+    <p class="dom-portal-inner-content">Hello there</p>
+  </div>
   `,
 })
 class PortalTestApp {
   @ViewChildren(CdkPortal) portals: QueryList<CdkPortal>;
   @ViewChild(CdkPortalOutlet, {static: true}) portalOutlet: CdkPortalOutlet;
-  @ViewChild('templateRef', { read: TemplateRef , static: true}) templateRef: TemplateRef<any>;
+  @ViewChild('templateRef', {read: TemplateRef, static: true}) templateRef: TemplateRef<any>;
+  @ViewChild('domPortalContent', {static: true}) domPortalContent: ElementRef<HTMLElement>;
 
   selectedPortal: Portal<any>|undefined;
   fruit: string = 'Banana';
diff --git a/src/cdk/portal/portal.ts b/src/cdk/portal/portal.ts
index 0e71a788b541..a6b7dc1a610e 100644
--- a/src/cdk/portal/portal.ts
+++ b/src/cdk/portal/portal.ts
@@ -153,6 +153,22 @@ export class TemplatePortal<C = any> extends Portal<EmbeddedViewRef<C>> {
   }
 }
 
+/**
+ * A `DomPortal` is a portal whose content will be taken from its current position
+ * in the DOM and moved into a portal outlet, when it is attached. On detach, the content
+ * will be restored to its original position.
+ */
+export class DomPortal extends Portal<HTMLElement> {
+  constructor(private _element: HTMLElement | ElementRef<HTMLElement>) {
+    super();
+  }
+
+  /** DOM node hosting the portal's content. */
+  get element(): HTMLElement {
+    return this._element instanceof ElementRef ? this._element.nativeElement : this._element;
+  }
+}
+
 
 /** A `PortalOutlet` is an space that can contain a single `Portal`. */
 export interface PortalOutlet {
@@ -213,6 +229,10 @@ export abstract class BasePortalOutlet implements PortalOutlet {
     } else if (portal instanceof TemplatePortal) {
       this._attachedPortal = portal;
       return this.attachTemplatePortal(portal);
+      // @breaking-change 8.0.0 remove null check for `this.attachDomPortal`.
+    } else if (this.attachDomPortal && portal instanceof DomPortal) {
+      this._attachedPortal = portal;
+      return this.attachDomPortal(portal);
     }
 
     throwUnknownPortalTypeError();
@@ -222,6 +242,9 @@ export abstract class BasePortalOutlet implements PortalOutlet {
 
   abstract attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
 
+  // @breaking-change 8.0.0 `attachDomPortal` to become a required method.
+  abstract attachDomPortal?(portal: DomPortal): any;
+
   /** Detaches a previously attached portal. */
   detach(): void {
     if (this._attachedPortal) {
diff --git a/src/dev-app/portal/portal-demo.html b/src/dev-app/portal/portal-demo.html
index 1a19fe9bc91d..bdb0e648447c 100644
--- a/src/dev-app/portal/portal-demo.html
+++ b/src/dev-app/portal/portal-demo.html
@@ -15,6 +15,10 @@ <h2> The portal outlet is here: </h2>
   Science joke
 </button>
 
+<button type="button" (click)="selectedPortal = dadJoke">
+  Dad joke
+</button>
+
 <!-- Template vars on <ng-template> elements can't be accessed _in_ the template because Angular
     doesn't support grabbing the instance / TemplateRef this way because the variable may be
     referring to something *in* the template (such as #item in ngFor). As such, the component
@@ -29,3 +33,8 @@ <h2> The portal outlet is here: </h2>
  <p> - Did you hear about this year's Fibonacci Conference? </p>
  <p> - It's going to be as big as the last two put together. </p>
 </div>
+
+<div class="demo-dad-joke" #domPortalSource>
+  <p> - Scientists got bored of watching the moon for 24 hours </p>
+  <p> - So they called it a day. </p>
+</div>
diff --git a/src/dev-app/portal/portal-demo.scss b/src/dev-app/portal/portal-demo.scss
index 812fce20bc2b..5b02c4a85abf 100644
--- a/src/dev-app/portal/portal-demo.scss
+++ b/src/dev-app/portal/portal-demo.scss
@@ -5,3 +5,7 @@
   width: 500px;
   height: 100px;
 }
+
+.demo-dad-joke {
+  opacity: 0.25;
+}
diff --git a/src/dev-app/portal/portal-demo.ts b/src/dev-app/portal/portal-demo.ts
index 65588371bd06..59b71febfa4f 100644
--- a/src/dev-app/portal/portal-demo.ts
+++ b/src/dev-app/portal/portal-demo.ts
@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentPortal, Portal, CdkPortal} from '@angular/cdk/portal';
-import {Component, QueryList, ViewChildren} from '@angular/core';
+import {ComponentPortal, Portal, CdkPortal, DomPortal} from '@angular/cdk/portal';
+import {Component, QueryList, ViewChildren, ElementRef, ViewChild} from '@angular/core';
 
 
 @Component({
@@ -18,6 +18,7 @@ import {Component, QueryList, ViewChildren} from '@angular/core';
 })
 export class PortalDemo {
   @ViewChildren(CdkPortal) templatePortals: QueryList<Portal<any>>;
+  @ViewChild('domPortalSource', {static: false}) domPortalSource: ElementRef<HTMLElement>;
 
   selectedPortal: Portal<any>;
 
@@ -32,6 +33,10 @@ export class PortalDemo {
   get scienceJoke() {
     return new ComponentPortal(ScienceJoke);
   }
+
+  get dadJoke() {
+    return new DomPortal(this.domPortalSource);
+  }
 }
 
 
diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts
index ee815a814b7f..4a161f1bf4e0 100644
--- a/src/material/bottom-sheet/bottom-sheet-container.ts
+++ b/src/material/bottom-sheet/bottom-sheet-container.ts
@@ -26,6 +26,7 @@ import {
   ComponentPortal,
   TemplatePortal,
   CdkPortalOutlet,
+  DomPortal,
 } from '@angular/cdk/portal';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {MatBottomSheetConfig} from './bottom-sheet-config';
@@ -122,6 +123,14 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
     return this._portalOutlet.attachTemplatePortal(portal);
   }
 
+  /** Attaches a DOM portal to the bottom sheet container. */
+  attachDomPortal(portal: DomPortal) {
+    this._validatePortalAttached();
+    this._setPanelClass();
+    this._savePreviouslyFocusedElement();
+    return this._portalOutlet.attachDomPortal(portal);
+  }
+
   /** Begin animation of bottom sheet entrance into view. */
   enter(): void {
     if (!this._destroyed) {
diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts
index 7a80ee3a5e3e..99a82c1e84cb 100644
--- a/src/material/dialog/dialog-container.ts
+++ b/src/material/dialog/dialog-container.ts
@@ -26,7 +26,8 @@ import {
   BasePortalOutlet,
   ComponentPortal,
   CdkPortalOutlet,
-  TemplatePortal
+  TemplatePortal,
+  DomPortal
 } from '@angular/cdk/portal';
 import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y';
 import {MatDialogConfig} from './dialog-config';
@@ -130,6 +131,19 @@ export class MatDialogContainer extends BasePortalOutlet {
     return this._portalOutlet.attachTemplatePortal(portal);
   }
 
+  /**
+   * Attaches a DOM portal to the dialog container.
+   * @param portal Portal to be attached.
+   */
+  attachDomPortal(portal: DomPortal) {
+    if (this._portalOutlet.hasAttached()) {
+      throwMatDialogContentAlreadyAttachedError();
+    }
+
+    this._savePreviouslyFocusedElement();
+    return this._portalOutlet.attachDomPortal(portal);
+  }
+
   /** Moves the focus inside the focus trap. */
   private _trapFocus() {
     if (!this._focusTrap) {
diff --git a/src/material/select/select.html b/src/material/select/select.html
index bd0a4522c612..dfcac153c40f 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -15,11 +15,28 @@
   <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
 </div>
 
+<ng-template #panelTemplate>
+  <div class="mat-select-panel-wrap" [@transformPanelWrap]>
+    <div
+      #panel
+      class="mat-select-panel {{ _getPanelTheme() }}"
+      [ngClass]="panelClass"
+      [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
+      (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
+      [style.transformOrigin]="_transformOrigin"
+      [style.font-size.px]="_triggerFontSize"
+      (keydown)="_handleKeydown($event)">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</ng-template>
+
 <ng-template
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
   cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayPortal]="_domPortal"
   [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayOpen]="panelOpen"
@@ -29,17 +46,9 @@
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
-  <div class="mat-select-panel-wrap" [@transformPanelWrap]>
-    <div
-      #panel
-      class="mat-select-panel {{ _getPanelTheme() }}"
-      [ngClass]="panelClass"
-      [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
-      (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
-      [style.transformOrigin]="_transformOrigin"
-      [style.font-size.px]="_triggerFontSize"
-      (keydown)="_handleKeydown($event)">
-      <ng-content></ng-content>
-    </div>
-  </div>
+  <ng-container *ngIf="!_inlineRendering" [ngTemplateOutlet]="panelTemplate"></ng-container>
 </ng-template>
+
+<div *ngIf="_inlineRendering" class="cdk-visually-hidden" #domPortalContent>
+  <ng-container [ngTemplateOutlet]="panelTemplate"></ng-container>
+</div>
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index cc9022b03bab..feff6870cc9a 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -29,6 +29,7 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
+  Provider,
 } from '@angular/core';
 import {
   async,
@@ -63,7 +64,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {Subject, Subscription, EMPTY, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {MatSelectModule} from './index';
-import {MatSelect} from './select';
+import {MatSelect, MAT_SELECT_RENDERING_STRATEGY, MatSelectOptionsRenderOptions} from './select';
 import {
   getMatSelectDynamicMultipleError,
   getMatSelectNonArrayValueError,
@@ -88,7 +89,7 @@ describe('MatSelect', () => {
    * overall test time.
    * @param declarations Components to declare for this block
    */
-  function configureMatSelectTestingModule(declarations: any[]) {
+  function configureMatSelectTestingModule(declarations: any[], providers: Provider[] = []) {
     TestBed.configureTestingModule({
       imports: [
         MatFormFieldModule,
@@ -105,6 +106,7 @@ describe('MatSelect', () => {
             scrolled: () => scrolledSubject.asObservable(),
           }),
         },
+        ...providers
       ],
     }).compileComponents();
 
@@ -4265,6 +4267,56 @@ describe('MatSelect', () => {
     });
 
   });
+
+  describe('with inline rendering strategy', () => {
+    beforeEach(async(() => {
+      configureMatSelectTestingModule([BasicSelect], [{
+        provide: MAT_SELECT_RENDERING_STRATEGY,
+        useValue: MatSelectOptionsRenderOptions.ALWAYS
+      }]);
+    }));
+
+    let fixture: ComponentFixture<BasicSelect>;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(BasicSelect);
+      fixture.detectChanges();
+    }));
+
+    it('should have aria-owns while the panel is closed', fakeAsync(() => {
+      const selectElement: HTMLElement = fixture.nativeElement.querySelector('.mat-select');
+
+      expect(selectElement.getAttribute('aria-owns')).toBeTruthy();
+
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
+      flush();
+
+      expect(selectElement.getAttribute('aria-owns')).toBeTruthy();
+    }));
+
+    it('should always keep the options inside the DOM', fakeAsync(() => {
+      const selectElement: HTMLElement = fixture.nativeElement.querySelector('.mat-select');
+      const options = Array.from(selectElement.querySelectorAll('.mat-option'));
+
+      expect(options.length).toBeGreaterThan(0, 'Expected more than zero options.');
+
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
+      flush();
+
+      expect(options.every(option => overlayContainerElement.contains(option)))
+          .toBe(true, 'Expected all options to be moved to the overlay container.');
+
+      fixture.componentInstance.select.close();
+      fixture.detectChanges();
+      flush();
+
+      expect(options.every(option => selectElement.contains(option)))
+          .toBe(true, 'Expected all options to be moved back into select.');
+    }));
+
+  });
 });
 
 
diff --git a/src/material/select/select.ts b/src/material/select/select.ts
index f8875435c053..c99da06bf46a 100644
--- a/src/material/select/select.ts
+++ b/src/material/select/select.ts
@@ -51,6 +51,7 @@ import {
   SimpleChanges,
   ViewChild,
   ViewEncapsulation,
+  AfterViewInit,
 } from '@angular/core';
 import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {
@@ -75,6 +76,7 @@ import {
   mixinTabIndex,
 } from '@angular/material/core';
 import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
+import {DomPortal} from '@angular/cdk/portal';
 import {defer, merge, Observable, Subject} from 'rxjs';
 import {
   distinctUntilChanged,
@@ -175,6 +177,26 @@ const _MatSelectMixinBase:
         mixinDisableRipple(mixinTabIndex(mixinDisabled(mixinErrorState(MatSelectBase))));
 
 
+/** Options used to configure the way `MatSelect` renders its content. */
+export enum MatSelectOptionsRenderOptions {
+  /**
+   * With this option, the content of a `MatSelect` will only be rendered in the DOM while
+   * the select is open. This strategy has better performance, however its accessibility is worse.
+   */
+  ONLY_WHEN_OPEN,
+
+  /**
+   * With this option, the select's content will always be inside the DOM, no matter whether
+   * the `MatSelect` is open. This offers better accessibility, however it has some
+   * performance drawbacks on selects with a lot of content.
+   */
+  ALWAYS,
+}
+
+/** Injection token that can be used to configured the rendering strategy for `MatSelect`. */
+export const MAT_SELECT_RENDERING_STRATEGY =
+    new InjectionToken<MatSelectOptionsRenderOptions>('MAT_SELECT_RENDERING_STRATEGY');
+
 /**
  * Allows the user to customize the trigger that is displayed when the select has a value.
  */
@@ -202,7 +224,7 @@ export class MatSelectTrigger {}
     '[attr.aria-required]': 'required.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-invalid]': 'errorState',
-    '[attr.aria-owns]': 'panelOpen ? _optionIds : null',
+    '[attr.aria-owns]': '(panelOpen || _inlineRendering) ? _optionIds : null',
     '[attr.aria-multiselectable]': 'multiple',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
@@ -224,8 +246,8 @@ export class MatSelectTrigger {}
     {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatSelect}
   ],
 })
-export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges,
-    OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex,
+export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, AfterViewInit,
+    OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex,
     MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
   private _scrollStrategyFactory: () => ScrollStrategy;
 
@@ -314,6 +336,15 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     },
   ];
 
+  /**
+   * Portal that'll be used to render the content
+   * when the `INLINE` rendering strategy is enabled.
+   */
+  _domPortal: DomPortal;
+
+  /** Whether the inline rendering strategy is enabled */
+  _inlineRendering = true;
+
   /** Whether the component is disabling centering of the active option over the trigger. */
   private _disableOptionCentering: boolean = false;
 
@@ -339,11 +370,14 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** Panel containing the select options. */
   @ViewChild('panel', {static: false}) panel: ElementRef;
 
+  /** Content rendered inside of the `DomPortal` when using the inline rendering strategy. */
+  @ViewChild('domPortalContent') _domPortalContent: ElementRef<HTMLElement>;
+
   /** Overlay pane containing the options. */
   @ViewChild(CdkConnectedOverlay, {static: false}) overlayDir: CdkConnectedOverlay;
 
   /** All of the defined select options. */
-  @ContentChildren(MatOption, { descendants: true }) options: QueryList<MatOption>;
+  @ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;
 
   /** All of the defined groups of options. */
   @ContentChildren(MatOptgroup) optionGroups: QueryList<MatOptgroup>;
@@ -496,7 +530,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
      * @deprecated _liveAnnouncer to be turned into a required parameter.
      * @breaking-change 8.0.0
      */
-    private _liveAnnouncer?: LiveAnnouncer) {
+    private _liveAnnouncer?: LiveAnnouncer,
+    @Inject(MAT_SELECT_RENDERING_STRATEGY) @Optional() renderingStrategy?: any) {
     super(elementRef, _defaultErrorStateMatcher, _parentForm,
           _parentFormGroup, ngControl);
 
@@ -510,6 +545,12 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     this._scrollStrategy = this._scrollStrategyFactory();
     this.tabIndex = parseInt(tabIndex) || 0;
 
+    // Note: the Angular compiler fails to generate metadata when we have the type on the
+    // function argument. Set the argument to `any` and cast it to the proper type down here
+    // as a workaround.
+    this._inlineRendering =
+      (renderingStrategy as MatSelectOptionsRenderOptions) === MatSelectOptionsRenderOptions.ALWAYS;
+
     // Force setter to be called in case id was not specified.
     this.id = this.id;
   }
@@ -558,6 +599,12 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     });
   }
 
+  ngAfterViewInit() {
+    if (this._inlineRendering) {
+      this._domPortal = new DomPortal(this._domPortalContent);
+    }
+  }
+
   ngDoCheck() {
     if (this.ngControl) {
       this.updateErrorState();
@@ -707,6 +754,15 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     }
   }
 
+  /** Gets the current animation state of the panel. */
+  _getPanelAnimationState() {
+    if (this.panelOpen) {
+      return this.multiple ? 'showing-multiple' : 'showing';
+    }
+
+    return 'void';
+  }
+
   /** Handles keyboard events while the select is closed. */
   private _handleClosedKeydown(event: KeyboardEvent): void {
     const keyCode = event.keyCode;
diff --git a/src/material/snack-bar/snack-bar-container.ts b/src/material/snack-bar/snack-bar-container.ts
index de006052e765..6de77c313c00 100644
--- a/src/material/snack-bar/snack-bar-container.ts
+++ b/src/material/snack-bar/snack-bar-container.ts
@@ -12,6 +12,7 @@ import {
   CdkPortalOutlet,
   ComponentPortal,
   TemplatePortal,
+  DomPortal,
 } from '@angular/cdk/portal';
 import {
   ChangeDetectionStrategy,
@@ -107,6 +108,13 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
     return this._portalOutlet.attachTemplatePortal(portal);
   }
 
+  /** Attaches a DOM portal to the snack bar container. */
+  attachDomPortal(portal: DomPortal) {
+    this._assertNotAttached();
+    this._applySnackBarClasses();
+    return this._portalOutlet.attachDomPortal(portal);
+  }
+
   /** Handle end of animations, updating the state of the snackbar. */
   onAnimationEnd(event: AnimationEvent) {
     const {fromState, toState} = event;
diff --git a/tools/public_api_guard/cdk/overlay.d.ts b/tools/public_api_guard/cdk/overlay.d.ts
index a7bee0ea9ecb..e50dc4a23456 100644
--- a/tools/public_api_guard/cdk/overlay.d.ts
+++ b/tools/public_api_guard/cdk/overlay.d.ts
@@ -25,13 +25,14 @@ export declare class CdkConnectedOverlay implements OnDestroy, OnChanges {
     overlayKeydown: EventEmitter<KeyboardEvent>;
     readonly overlayRef: OverlayRef;
     panelClass: string | string[];
+    portal: Portal<any>;
     positionChange: EventEmitter<ConnectedOverlayPositionChange>;
     positions: ConnectedPosition[];
     push: boolean;
     scrollStrategy: ScrollStrategy;
     viewportMargin: number;
     width: number | string;
-    constructor(_overlay: Overlay, templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, scrollStrategyFactory: any, _dir: Directionality);
+    constructor(_overlay: Overlay, _templateRef: TemplateRef<any>, _viewContainerRef: ViewContainerRef, scrollStrategyFactory: any, _dir: Directionality);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
 }
diff --git a/tools/public_api_guard/material/bottom-sheet.d.ts b/tools/public_api_guard/material/bottom-sheet.d.ts
index 3d1a9e3ed396..0e29cfdfae1d 100644
--- a/tools/public_api_guard/material/bottom-sheet.d.ts
+++ b/tools/public_api_guard/material/bottom-sheet.d.ts
@@ -39,6 +39,7 @@ export declare class MatBottomSheetContainer extends BasePortalOutlet implements
     _onAnimationDone(event: AnimationEvent): void;
     _onAnimationStart(event: AnimationEvent): void;
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    attachDomPortal(portal: DomPortal): void;
     attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
     enter(): void;
     exit(): void;
diff --git a/tools/public_api_guard/material/dialog.d.ts b/tools/public_api_guard/material/dialog.d.ts
index dfdf61450454..9ee2169a5ca5 100644
--- a/tools/public_api_guard/material/dialog.d.ts
+++ b/tools/public_api_guard/material/dialog.d.ts
@@ -93,6 +93,7 @@ export declare class MatDialogContainer extends BasePortalOutlet {
     _onAnimationStart(event: AnimationEvent): void;
     _startExitAnimation(): void;
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    attachDomPortal(portal: DomPortal): void;
     attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
 }
 
diff --git a/tools/public_api_guard/material/select.d.ts b/tools/public_api_guard/material/select.d.ts
index dd2ae29bc6dd..48d0fe919a06 100644
--- a/tools/public_api_guard/material/select.d.ts
+++ b/tools/public_api_guard/material/select.d.ts
@@ -1,5 +1,7 @@
 export declare const fadeInContent: AnimationTriggerMetadata;
 
+export declare const MAT_SELECT_RENDERING_STRATEGY: InjectionToken<MatSelectOptionsRenderOptions>;
+
 export declare const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 
 export declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
@@ -10,9 +12,12 @@ export declare const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
 
 export declare function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
 
-export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
+export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, AfterViewInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
     _ariaDescribedby: string;
     readonly _closedStream: Observable<void>;
+    _domPortal: DomPortal;
+    _domPortalContent: ElementRef<HTMLElement>;
+    _inlineRendering: boolean;
     _keyManager: ActiveDescendantKeyManager<MatOption>;
     _offsetY: number;
     _onChange: (value: any) => void;
@@ -64,11 +69,12 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     value: any;
     readonly valueChange: EventEmitter<any>;
     constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any,
-    _liveAnnouncer?: LiveAnnouncer | undefined);
+    _liveAnnouncer?: LiveAnnouncer | undefined, renderingStrategy?: any);
     _calculateOverlayScroll(selectedIndex: number, scrollBuffer: number, maxScroll: number): number;
     _getAriaActiveDescendant(): string | null;
     _getAriaLabel(): string | null;
     _getAriaLabelledby(): string | null;
+    _getPanelAnimationState(): "void" | "showing" | "showing-multiple";
     _getPanelTheme(): string;
     _handleKeydown(event: KeyboardEvent): void;
     _isRtl(): boolean;
@@ -78,6 +84,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     close(): void;
     focus(): void;
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngDoCheck(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -109,6 +116,11 @@ export declare class MatSelectChange {
 export declare class MatSelectModule {
 }
 
+export declare enum MatSelectOptionsRenderOptions {
+    ONLY_WHEN_OPEN = 0,
+    ALWAYS = 1
+}
+
 export declare class MatSelectTrigger {
 }
 
diff --git a/tools/public_api_guard/material/snack-bar.d.ts b/tools/public_api_guard/material/snack-bar.d.ts
index 564e80d44ad8..6511f8aa339d 100644
--- a/tools/public_api_guard/material/snack-bar.d.ts
+++ b/tools/public_api_guard/material/snack-bar.d.ts
@@ -40,6 +40,7 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements On
     constructor(_ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef,
     snackBarConfig: MatSnackBarConfig);
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    attachDomPortal(portal: DomPortal): void;
     attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
     enter(): void;
     exit(): Observable<void>;