diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index b70a77827fd..5731764c188 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input, SimpleChanges, OnChanges, Injector} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {createCustomElement} from '@angular/elements';
 
 /** Displays a set of material examples in a mat-accordion. */
 @Component({
@@ -33,6 +32,7 @@ import {createCustomElement} from '@angular/elements';
   styles: [`
     mat-expansion-panel {
       box-shadow: none !important;
+      border-radius: 0 !important;
       background: transparent;
       border-top: 1px solid #CCC;
     }
@@ -52,10 +52,7 @@ import {createCustomElement} from '@angular/elements';
     }
   `]
 })
-export class ExampleList implements OnChanges {
-  /** Keeps track of the example ids that have been compiled already. */
-  private static _compiledComponents = new Set<string>();
-
+export class ExampleList {
   /** Type of examples being displayed. */
   @Input() type: string;
 
@@ -68,20 +65,4 @@ export class ExampleList implements OnChanges {
   _expandAll: boolean;
 
   exampleComponents = EXAMPLE_COMPONENTS;
-
-  constructor(private _injector: Injector) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.ids) {
-      (changes.ids.currentValue as string[])
-        .filter(id => !ExampleList._compiledComponents.has(id))
-        .forEach(id => {
-          const element = createCustomElement(EXAMPLE_COMPONENTS[id].component, {
-            injector: this._injector
-          });
-          customElements.define(id, element);
-          ExampleList._compiledComponents.add(id);
-        });
-    }
-  }
 }
diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts
index a28ec4ea820..215d71bf715 100644
--- a/src/dev-app/example/example.ts
+++ b/src/dev-app/example/example.ts
@@ -9,6 +9,7 @@
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Component, ElementRef, Injector, Input, OnInit} from '@angular/core';
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+import {createCustomElement} from '@angular/elements';
 
 @Component({
   selector: 'material-example',
@@ -54,14 +55,20 @@ export class Example implements OnInit {
 
   title: string;
 
-  constructor(private elementRef: ElementRef, private injector: Injector) { }
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _injector: Injector) { }
 
   ngOnInit() {
-    // Should be created with this component's injector to capture the whole injector which may
-    // include provided things like Directionality.
-    const exampleElementCtor = customElements.get(this.id);
-    this.elementRef.nativeElement.appendChild(new exampleElementCtor(this.injector));
+    let exampleElementCtor = customElements.get(this.id);
 
+    if (!exampleElementCtor) {
+      exampleElementCtor = createCustomElement(EXAMPLE_COMPONENTS[this.id].component, {
+        injector: this._injector
+      });
+
+      customElements.define(this.id, exampleElementCtor);
+    }
+
+    this._elementRef.nativeElement.appendChild(new exampleElementCtor(this._injector));
     this.title = EXAMPLE_COMPONENTS[this.id] ? EXAMPLE_COMPONENTS[this.id].title : '';
   }
 }