diff --git a/packages/core/src/components/nav/test/basic/index.html b/packages/core/src/components/nav/test/basic/index.html
index 0a9f8e0415..d22c826553 100644
--- a/packages/core/src/components/nav/test/basic/index.html
+++ b/packages/core/src/components/nav/test/basic/index.html
@@ -5,106 +5,116 @@
   <title>Nav</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page One</h1>
+              <ion-nav-push component="page-two">
+                <ion-button class="next">Go to Page Two</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Page Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Two</h1>
+              <div>
+                <ion-nav-push component="page-three">
+                  <ion-button class="next">Go to Page Two</ion-button>
+                </ion-nav-push>
+              </div>
+              <div>
+                <ion-nav-pop>
+                  <ion-button class="next">Go Back</ion-button>
+                </ion-nav-pop>
+              </div>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Page Three</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Three</h1>
+              <div>
+                <ion-nav-pop>
+                  <ion-button class="next">Go Back</ion-button>
+                </ion-nav-pop>
+              </div>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+    function regularElement() {
+      const start = Date.now();
+      const element = document.createElement('page-three');
+      document.body.appendChild(element);
+      const end = Date.now();
+      console.log(`It took ${end - start} millis to create the custom element, add it to the DOM`);
+      return Promise.resolve().then(() => {
+
+      }).then(() => {
+
+      }).then(() => {
+        const endTwo = Date.now();
+        console.log(`It took ${endTwo - start} millis after the promise blocks bro`);
+      });
+    }
+
+    function stencilElement() {
+      const start = Date.now();
+      const element = document.createElement('ion-nav');
+      document.body.appendChild(element);
+      const end = Date.now();
+      console.log(`It took ${end - start} millis to create the stencil element, add it to the DOM`);
+      return element.componentOnReady().then(() => {
+
+      }).then(() => {
+
+      }).then(() => {
+        const endTwo = Date.now();
+        console.log(`It took ${endTwo - start} millis after the promise blocks bro`);
+      });
+    }
+  </script>
 </head>
-<body onload="loadFirstPage()">
+<body>
   <ion-app>
-    <ion-nav></ion-nav>
+    <ion-nav root="page-one"></ion-nav>
   </ion-app>
-  <style>
-    f {
-      display: block;
-      margin: 15px auto;
-      max-width: 150px;
-      height: 150px;
-      background: blue;
-    }
-
-    f:last-of-type {
-      background: yellow;
-    }
-  </style>
 </body>
-
-<script>
-
-  async function loadFirstPage() {
-    const nav = document.querySelector('ion-nav');
-    await nav.componentOnReady();
-    const firstPage = document.createElement('ion-page');
-    firstPage.classList.add('first-page');
-    firstPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page One</h1>
-        <ion-button class="next">Go to Page Two</ion-button>
-      </ion-content>
-    `;
-
-    await nav.push(firstPage);
-
-    // okay cool, we're in the DOM now
-    const button = firstPage.querySelector('ion-button');
-    button.addEventListener('click', async () => {
-      await goToPageTwo(nav);
-    });
-  }
-
-  async function goToPageTwo(nav) {
-    const secondPage = document.createElement('ion-page');
-    secondPage.classList.add('second-page');
-    secondPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Page Two</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page Two</h1>
-        <ion-button class="next">Go to Page Three</ion-button>
-        <ion-button class="previous">Go Back</ion-button>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(secondPage);
-
-    const previousButton = secondPage.querySelector('ion-button .previous');
-    previousButton.addEventListener('click', async () => {
-      await nav.pop();
-    });
-
-    const nextButton = secondPage.querySelector('ion-button .next');
-    nextButton.addEventListener('click', async () => {
-      await goToPageThree(nav);
-    });
-  }
-
-  async function goToPageThree(nav) {
-    const thirdPage = document.createElement('ion-page');
-    thirdPage.classList.add('third-page');
-    thirdPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Page Three</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page Three</h1>
-        <ion-button class="previous">Go Back</ion-button>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(thirdPage);
-
-    const previousButton = thirdPage.querySelector('ion-button .previous');
-    previousButton.addEventListener('click', async () => {
-      await nav.pop();
-    });
-  }
-</script>
 </html>
diff --git a/packages/core/src/components/nav/test/simple-nested-navs/index.html b/packages/core/src/components/nav/test/simple-nested-navs/index.html
index d8836858e6..f37e581795 100644
--- a/packages/core/src/components/nav/test/simple-nested-navs/index.html
+++ b/packages/core/src/components/nav/test/simple-nested-navs/index.html
@@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Nav</title>
+  <title>Simple Nested Navs</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
   <script>
