From eb7cbe9f04b57a31c7a034669d7a8926de4d30a4 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Wed, 28 Feb 2018 15:05:20 +0100
Subject: [PATCH] refactor(page): removes ion-page wc

---
 .../src/components/page-one/page-one.tsx      | 20 +++---
 .../src/components/page-two/page-two.tsx      | 18 +++--
 .../src/components/tab-one/tab-one.tsx        | 18 +++--
 .../src/components/tab-three/tab-three.tsx    | 18 +++--
 .../src/components/tab-two/tab-two.tsx        | 18 +++--
 packages/core/src/components.d.ts             | 30 ---------
 .../action-sheet/test/basic/index.html        | 35 +++++-----
 .../action-sheet/test/translucent/index.html  |  4 +-
 .../components/alert/test/basic/index.html    |  4 +-
 .../alert/test/translucent/index.html         |  4 +-
 packages/core/src/components/app/app.scss     | 15 +----
 .../components/avatar/test/basic/index.html   |  4 +-
 .../core/src/components/back-button/readme.md | 66 +++++++++----------
 .../back-button/test/basic/index.html         |  6 +-
 .../back-button/test/host-element/index.html  | 12 ++--
 .../components/badge/test/basic/index.html    |  4 +-
 .../components/button/test/anchor/index.html  |  4 +-
 .../components/button/test/basic/index.html   |  4 +-
 .../components/button/test/expand/index.html  |  4 +-
 .../components/button/test/fill/index.html    |  4 +-
 .../components/button/test/icon/index.html    |  4 +-
 .../components/button/test/round/index.html   |  4 +-
 .../components/button/test/size/index.html    |  4 +-
 .../components/button/test/strong/index.html  |  4 +-
 .../components/button/test/toolbar/index.html |  4 +-
 .../components/buttons/test/icon/index.html   |  4 +-
 .../src/components/card/test/basic/index.html |  4 +-
 .../card/test/translucent/index.html          |  4 +-
 .../components/checkbox/test/basic/index.html |  4 +-
 .../src/components/chip/test/basic/index.html |  3 +-
 .../components/content/test/basic/index.html  |  3 +-
 .../components/datetime/test/basic/index.html |  3 +-
 .../components/events/test/basic/index.html   |  4 +-
 .../src/components/fab/test/basic/index.html  |  3 +-
 .../fab/test/translucent/index.html           |  3 +-
 .../src/components/grid/test/basic/index.html |  3 +-
 .../hide-when/test/basic/index.html           |  4 +-
 .../src/components/icon/test/basic/index.html |  4 +-
 .../src/components/icon/test/items/index.html |  4 +-
 .../infinite-scroll/test/basic/index.html     |  4 +-
 .../input/test/attributes/index.html          |  3 +-
 .../components/input/test/basic/index.html    |  3 +-
 .../item-sliding/test/basic/index.html        |  4 +-
 .../src/components/item/test/basic/index.html |  4 +-
 .../components/item/test/buttons/index.html   |  4 +-
 .../components/item/test/colors/index.html    |  4 +-
 .../components/item/test/dividers/index.html  |  4 +-
 .../components/item/test/groups/index.html    |  4 +-
 .../src/components/item/test/icons/index.html |  4 +-
 .../components/item/test/images/index.html    |  4 +-
 .../components/item/test/inputs/index.html    |  4 +-
 .../src/components/item/test/media/index.html |  4 +-
 .../components/item/test/reorder/index.html   |  4 +-
 .../components/item/test/sliding/index.html   |  4 +-
 .../src/components/item/test/text/index.html  |  4 +-
 .../components/label/test/basic/index.html    |  4 +-
 .../src/components/list/test/basic/index.html |  4 +-
 .../components/loading/test/basic/index.html  |  4 +-
 .../menu-toggle/test/basic/index.html         |  4 +-
 .../menu-toggle/test/button/index.html        |  5 +-
 .../menu-toggle/test/list/index.html          |  5 +-
 .../src/components/menu/test/basic/index.html |  4 +-
 .../menu/test/standalone/index.html           |  5 +-
 .../src/components/modal-controller/readme.md |  2 +-
 packages/core/src/components/modal/readme.md  |  2 +-
 .../components/modal/test/basic/index.html    |  6 +-
 .../modal/test/host-elements/index.html       |  9 ++-
 .../components/nav-pop/test/basic/index.html  |  6 +-
 .../components/nav-push/test/basic/index.html |  9 +--
 .../nav-set-root/test/basic/index.html        |  8 +--
 packages/core/src/components/nav/nav.tsx      |  1 +
 .../src/components/nav/test/basic/index.html  |  9 +--
 .../nav/test/host-elements/index.html         | 15 ++---
 .../nav/test/nav-then-tabs/index.html         | 53 +++++++--------
 .../nav/test/simple-nested-navs/index.html    | 12 ++--
 .../nav/transitions/transition.md.ts          |  4 +-
 .../src/components/note/test/basic/index.html |  4 +-
 packages/core/src/components/page/page.tsx    | 19 ------
 packages/core/src/components/page/readme.md   | 11 ----
 .../src/components/page/test/basic/index.html |  4 +-
 .../page/test/host-element/index.html         |  2 +-
 .../page/test/no-ion-app-basic/index.html     |  4 +-
 .../test/no-ion-app-host-element/index.html   |  2 +-
 .../components/platform/test/basic/index.html |  4 +-
 .../components/popover/test/basic/index.html  |  4 +-
 .../radio-group/test/basic/index.html         |  4 +-
 .../radio-group/test/form/index.html          |  4 +-
 .../components/radio/test/basic/index.html    |  3 +-
 .../components/range/test/basic/index.html    |  4 +-
 .../refresher/test/basic/index.html           |  4 +-
 .../components/reorder/test/basic/index.html  |  4 +-
 .../ripple-effect/test/basic/index.html       |  4 +-
 .../searchbar/test/basic/index.html           |  4 +-
 .../searchbar/test/toolbar/index.html         |  4 +-
 .../components/segment/test/basic/index.html  |  4 +-
 .../components/select/test/basic/index.html   |  3 +-
 .../select/test/multiple-value/index.html     |  3 +-
 .../select/test/single-value/index.html       |  3 +-
 .../show-when/test/basic/index.html           |  4 +-
 .../slides/test/app-intro/index.html          |  4 +-
 .../components/slides/test/basic/index.html   |  4 +-
 .../components/spinner/test/basic/index.html  |  4 +-
 .../components/spinner/test/color/index.html  |  4 +-
 .../split-pane/test/basic/index.html          |  4 +-
 .../status-tap/test/basic/index.html          |  4 +-
 .../src/components/tabs/test/basic/index.html | 16 ++---
 .../tap-click/test/basic/index.html           |  4 +-
 .../src/components/text/test/basic/index.html |  4 +-
 .../components/textarea/test/basic/index.html |  4 +-
 .../thumbnail/test/basic/index.html           |  4 +-
 .../components/toast/test/basic/index.html    |  4 +-
 .../components/toggle/test/basic/index.html   |  3 +-
 .../components/toolbar/test/basic/index.html  |  4 +-
 .../components/toolbar/test/colors/index.html |  4 +-
 .../toolbar/test/scenarios/index.html         |  4 +-
 .../toolbar/test/translucent/index.html       |  4 +-
 .../components/virtual-scroll/test/basic.html |  4 +-
 .../components/virtual-scroll/test/cards.html |  4 +-
 packages/core/src/index.d.ts                  |  1 -
 .../src/themes/test/css-variables/index.html  |  4 +-
 packages/core/stencil.config.js               |  2 +-
 121 files changed, 330 insertions(+), 465 deletions(-)
 delete mode 100644 packages/core/src/components/page/page.tsx
 delete mode 100644 packages/core/src/components/page/readme.md

diff --git a/packages/core/scripts/test-components/src/components/page-one/page-one.tsx b/packages/core/scripts/test-components/src/components/page-one/page-one.tsx
index dc7d31b48c..9c9fb64a08 100644
--- a/packages/core/scripts/test-components/src/components/page-one/page-one.tsx
+++ b/packages/core/scripts/test-components/src/components/page-one/page-one.tsx
@@ -7,17 +7,15 @@ export class PageOne {
 
   render() {
     return [
-      <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Page One</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          page one
-          <a href='#/two/second-page'>Ir a la page 2</a>
-        </ion-content>
-      </ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+      <ion-content>
+        page one
+        <a href='#/two/second-page'>Ir a la page 2</a>
+      </ion-content>
     ];
   }
 }
diff --git a/packages/core/scripts/test-components/src/components/page-two/page-two.tsx b/packages/core/scripts/test-components/src/components/page-two/page-two.tsx
index 077562bb9f..3ab9a6ec8e 100644
--- a/packages/core/scripts/test-components/src/components/page-two/page-two.tsx
+++ b/packages/core/scripts/test-components/src/components/page-two/page-two.tsx
@@ -7,16 +7,14 @@ export class PageTwo {
 
   render() {
     return [
-      <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Page Two</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          this is page two
-        </ion-content>
-      </ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+      <ion-content>
+        this is page two
+      </ion-content>
     ];
   }
 }
diff --git a/packages/core/scripts/test-components/src/components/tab-one/tab-one.tsx b/packages/core/scripts/test-components/src/components/tab-one/tab-one.tsx
index b65f38ff0e..efbfca449b 100644
--- a/packages/core/scripts/test-components/src/components/tab-one/tab-one.tsx
+++ b/packages/core/scripts/test-components/src/components/tab-one/tab-one.tsx
@@ -7,16 +7,14 @@ export class TabOne {
 
   render() {
     return [
-      <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Page One</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          tab one
-        </ion-content>
-      </ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+      <ion-content>
+        tab one
+      </ion-content>
     ];
   }
 }
diff --git a/packages/core/scripts/test-components/src/components/tab-three/tab-three.tsx b/packages/core/scripts/test-components/src/components/tab-three/tab-three.tsx
index bd91cb4558..5fac7a6159 100644
--- a/packages/core/scripts/test-components/src/components/tab-three/tab-three.tsx
+++ b/packages/core/scripts/test-components/src/components/tab-three/tab-three.tsx
@@ -7,16 +7,14 @@ export class TabThree {
 
   render() {
     return [
-      <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Tab 3</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          tab three
-        </ion-content>
-      </ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Tab 3</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+      <ion-content>
+        tab three
+      </ion-content>
     ];
   }
 }
diff --git a/packages/core/scripts/test-components/src/components/tab-two/tab-two.tsx b/packages/core/scripts/test-components/src/components/tab-two/tab-two.tsx
index 5530c7a39c..9599ef420c 100644
--- a/packages/core/scripts/test-components/src/components/tab-two/tab-two.tsx
+++ b/packages/core/scripts/test-components/src/components/tab-two/tab-two.tsx
@@ -7,16 +7,14 @@ export class TabTwo {
 
   render() {
     return [
-      <ion-page>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Tab two (2)</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <ion-nav></ion-nav>
-        </ion-content>
-      </ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Tab two (2)</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+      <ion-content>
+        <ion-nav></ion-nav>
+      </ion-content>
     ];
   }
 }
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 0bc2e376f0..6208e8a177 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -2081,36 +2081,6 @@ declare global {
 }
 
 
-import {
-  Page as IonPage
-} from './components/page/page';
-
-declare global {
-  interface HTMLIonPageElement extends IonPage, HTMLStencilElement {
-  }
-  var HTMLIonPageElement: {
-    prototype: HTMLIonPageElement;
-    new (): HTMLIonPageElement;
-  };
-  interface HTMLElementTagNameMap {
-    "ion-page": HTMLIonPageElement;
-  }
-  interface ElementTagNameMap {
-    "ion-page": HTMLIonPageElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      "ion-page": JSXElements.IonPageAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface IonPageAttributes extends HTMLAttributes {
-      
-    }
-  }
-}
-
-
 import {
   PickerColumnCmp as IonPickerColumn
 } from './components/picker-column/picker-column';
diff --git a/packages/core/src/components/action-sheet/test/basic/index.html b/packages/core/src/components/action-sheet/test/basic/index.html
index d8a4d79ad3..2936a28637 100644
--- a/packages/core/src/components/action-sheet/test/basic/index.html
+++ b/packages/core/src/components/action-sheet/test/basic/index.html
@@ -10,28 +10,27 @@
 
 <body>
   <ion-app>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Action Sheet - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
 
-      <ion-content padding>
-        <ion-action-sheet-controller></ion-action-sheet-controller>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Action Sheet - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
-        <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
-        <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
+    <ion-content padding>
+      <ion-action-sheet-controller></ion-action-sheet-controller>
 
-      </ion-content>
+      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
+      <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
+      <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
+      <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
+      <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
+      <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+      <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
+      <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
+
+    </ion-content>
 
-    </ion-page>
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/action-sheet/test/translucent/index.html b/packages/core/src/components/action-sheet/test/translucent/index.html
index e0cbe1514b..2630fc099d 100644
--- a/packages/core/src/components/action-sheet/test/translucent/index.html
+++ b/packages/core/src/components/action-sheet/test/translucent/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Action Sheet - Translucent</ion-title>
@@ -41,7 +41,7 @@
           </ion-row>
         </ion-grid>
       </ion-content>
-    </ion-page>
+    
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/alert/test/basic/index.html b/packages/core/src/components/alert/test/basic/index.html
index e669813ad0..81611f60f9 100644
--- a/packages/core/src/components/alert/test/basic/index.html
+++ b/packages/core/src/components/alert/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Alert - Basic</ion-title>
@@ -30,7 +30,7 @@
         <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
         <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/alert/test/translucent/index.html b/packages/core/src/components/alert/test/translucent/index.html
index 80ad31a4e7..937647a8fa 100644
--- a/packages/core/src/components/alert/test/translucent/index.html
+++ b/packages/core/src/components/alert/test/translucent/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Alert - Translucent</ion-title>
@@ -44,7 +44,7 @@
         <ion-button expand="block" color="secondary" onclick="presentAlertRadio()">Radio</ion-button>
         <ion-button expand="block" color="danger" onclick="presentAlertCheckbox()">Checkbox</ion-button>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/app/app.scss b/packages/core/src/components/app/app.scss
index 396f6255b0..815a2a0b13 100644
--- a/packages/core/src/components/app/app.scss
+++ b/packages/core/src/components/app/app.scss
@@ -150,23 +150,10 @@ sub {
   bottom: -.25em;
 }
 
-ion-app {
-  @include position(0);
-
-  position: absolute;
-
-  z-index: $z-index-page-container;
-
-  width: 100%;
-  height: 100%;
-
-  contain: layout size style;
-}
-
-
 // Page Container Structure
 // --------------------------------------------------
 
+ion-app,
 .ion-page {
   @include position(0);
 
diff --git a/packages/core/src/components/avatar/test/basic/index.html b/packages/core/src/components/avatar/test/basic/index.html
index c2867761c8..67f5fdf142 100644
--- a/packages/core/src/components/avatar/test/basic/index.html
+++ b/packages/core/src/components/avatar/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Avatar - Basic</ion-title>
@@ -36,7 +36,7 @@
           <ion-label>Item Avatar</ion-label>
         </ion-item>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/back-button/readme.md b/packages/core/src/components/back-button/readme.md
index 1719f7e417..9c17c6d247 100644
--- a/packages/core/src/components/back-button/readme.md
+++ b/packages/core/src/components/back-button/readme.md
@@ -4,15 +4,13 @@ A back button is a component that allows you navigate back into app history. To
 add a back button to your view, all you need is:
 
 ```html
-<ion-page>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button></ion-back-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-</ion-page>
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
 ```
 
 The back button component is smart enough to know what to render and what content to show.
@@ -20,39 +18,35 @@ The back button component is smart enough to know what to render and what conten
 If, however, you want more control over what is shown in the back button, you can pass your own button markup.
 
 ```html
-<ion-page>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button>
-          <ion-button>
-              Button Text
-            <ion-icon name="add" slot="start"></ion-icon>
-          </ion-button>
-        </ion-back-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-</ion-page>
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button>
+        <ion-button>
+            Button Text
+          <ion-icon name="add" slot="start"></ion-icon>
+        </ion-button>
+      </ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
 ```
 
 Or no button text at all:
 
 
 ```html
-<ion-page>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button>
-          <ion-button>
-            <ion-icon name="add" slot="icon-only"></ion-icon>
-          </ion-button>
-        </ion-back-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-</ion-page>
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button>
+        <ion-button>
+          <ion-icon name="add" slot="icon-only"></ion-icon>
+        </ion-button>
+      </ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
 ```
 
 
diff --git a/packages/core/src/components/back-button/test/basic/index.html b/packages/core/src/components/back-button/test/basic/index.html
index 79d6acbb5f..920a74a4f4 100644
--- a/packages/core/src/components/back-button/test/basic/index.html
+++ b/packages/core/src/components/back-button/test/basic/index.html
@@ -17,7 +17,7 @@
   async function loadFirstPage() {
     const nav = document.querySelector('ion-nav');
     await nav.componentOnReady();
-    const firstPage = document.createElement('ion-page');
+    const firstPage = document.createElement('div');
     firstPage.classList.add('first-page');
     firstPage.innerHTML = `
       <ion-header>
@@ -44,7 +44,7 @@
   }
 
   async function goToPageTwo(nav) {
-    const secondPage = document.createElement('ion-page');
+    const firstPage = document.createElement('div');
     secondPage.classList.add('second-page');
     secondPage.innerHTML = `
       <ion-header>
@@ -72,7 +72,7 @@
   }
 
   async function goToPageThree(nav) {
-    const thirdPage = document.createElement('ion-page');
+    const thirdPage = document.createElement('div');
     thirdPage.classList.add('third-page');
     thirdPage.innerHTML = `
       <ion-header>
diff --git a/packages/core/src/components/back-button/test/host-element/index.html b/packages/core/src/components/back-button/test/host-element/index.html
index ac54d5fe8d..b6e47e8e36 100644
--- a/packages/core/src/components/back-button/test/host-element/index.html
+++ b/packages/core/src/components/back-button/test/host-element/index.html
@@ -9,7 +9,7 @@
     class PageOne extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -24,7 +24,6 @@
                 <ion-button class="next">Go to Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
         `;
       }
     }
@@ -32,7 +31,7 @@
     class PageTwo extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -49,7 +48,6 @@
                 </ion-nav-push>
               </div>
             </ion-content>
-          </ion-page>
         `;
       }
     }
@@ -57,7 +55,7 @@
     class PageThree extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -74,7 +72,6 @@
                 </ion-nav-push>
               </div>
             </ion-content>
-          </ion-page>
         `;
       }
     }
@@ -82,7 +79,7 @@
     class PageFour extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -94,7 +91,6 @@
             <ion-content padding>
               <h1>Page Four</h1>
             </ion-content>
-          </ion-page>
         `;
       }
     }
diff --git a/packages/core/src/components/badge/test/basic/index.html b/packages/core/src/components/badge/test/basic/index.html
index 0d2fbb2b81..78ae950fd8 100644
--- a/packages/core/src/components/badge/test/basic/index.html
+++ b/packages/core/src/components/badge/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Badge - Basic</ion-title>
@@ -111,7 +111,7 @@
         </ion-list>
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/button/test/anchor/index.html b/packages/core/src/components/button/test/anchor/index.html
index df31899846..a9698c9203 100644
--- a/packages/core/src/components/button/test/anchor/index.html
+++ b/packages/core/src/components/button/test/anchor/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button - Anchor</ion-title>
@@ -61,7 +61,7 @@
             <ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
           </p>
         </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
index 8731872fa6..11b39c731b 100644
--- a/packages/core/src/components/button/test/basic/index.html
+++ b/packages/core/src/components/button/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Button - Basic</ion-title>
@@ -77,7 +77,7 @@
         </p>
 
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/button/test/expand/index.html b/packages/core/src/components/button/test/expand/index.html
index 4b6853a13d..c3176d198d 100644
--- a/packages/core/src/components/button/test/expand/index.html
+++ b/packages/core/src/components/button/test/expand/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button - Expand</ion-title>
@@ -41,7 +41,7 @@
             <ion-button expand="full" round>Full + Round</ion-button>
           </p>
         </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/fill/index.html b/packages/core/src/components/button/test/fill/index.html
index dd145b4e9d..3686a3a64b 100644
--- a/packages/core/src/components/button/test/fill/index.html
+++ b/packages/core/src/components/button/test/fill/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button - Fill</ion-title>
@@ -124,7 +124,7 @@
             <ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
           </p>
         </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/icon/index.html b/packages/core/src/components/button/test/icon/index.html
index d5ac58b47a..c9da331b8c 100644
--- a/packages/core/src/components/button/test/icon/index.html
+++ b/packages/core/src/components/button/test/icon/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button - Icon</ion-title>
@@ -119,7 +119,7 @@
             </ion-button>
           </p>
         </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/round/index.html b/packages/core/src/components/button/test/round/index.html
index e6e112bac7..f17835b034 100644
--- a/packages/core/src/components/button/test/round/index.html
+++ b/packages/core/src/components/button/test/round/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Button - Round</ion-title>
@@ -43,7 +43,7 @@
         <ion-button round expand="full" color="dark">Full</ion-button>
         <ion-button round strong>Strong</ion-button>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <style>
diff --git a/packages/core/src/components/button/test/size/index.html b/packages/core/src/components/button/test/size/index.html
index 1c36fc8d51..55cade42b8 100644
--- a/packages/core/src/components/button/test/size/index.html
+++ b/packages/core/src/components/button/test/size/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button - Size</ion-title>
@@ -51,7 +51,7 @@
             <ion-button size="large" fill="clear" href="#">Large</ion-button>
           </p>
         </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/strong/index.html b/packages/core/src/components/button/test/strong/index.html
index 1268e982ed..1e3a4774f4 100644
--- a/packages/core/src/components/button/test/strong/index.html
+++ b/packages/core/src/components/button/test/strong/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button - Strong</ion-title>
@@ -23,7 +23,7 @@
           <p><ion-button strong expand="full" color="dark">Full</ion-button></p>
           <p><ion-button strong round>Strong</ion-button></p>
         </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/button/test/toolbar/index.html b/packages/core/src/components/button/test/toolbar/index.html
index 1601a75f45..2e34aea1d2 100644
--- a/packages/core/src/components/button/test/toolbar/index.html
+++ b/packages/core/src/components/button/test/toolbar/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Button - Toolbar</ion-title>
@@ -250,7 +250,7 @@
           </ion-segment>
         </ion-toolbar>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/buttons/test/icon/index.html b/packages/core/src/components/buttons/test/icon/index.html
index 4b749a5f20..7f24610694 100644
--- a/packages/core/src/components/buttons/test/icon/index.html
+++ b/packages/core/src/components/buttons/test/icon/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Button - Basic</ion-title>
@@ -25,7 +25,7 @@
       <ion-content padding no-bounce text-center>
         Content
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/card/test/basic/index.html b/packages/core/src/components/card/test/basic/index.html
index d7f40ddb5f..11aa3c8dc4 100644
--- a/packages/core/src/components/card/test/basic/index.html
+++ b/packages/core/src/components/card/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Card - Basic</ion-title>
@@ -64,7 +64,7 @@
           </ion-item>
         </ion-card>
       </ion-content>
-    </ion-page>
+
   </ion-app>
   <style>
     .content {
diff --git a/packages/core/src/components/card/test/translucent/index.html b/packages/core/src/components/card/test/translucent/index.html
index cd1bfe5606..993839037a 100644
--- a/packages/core/src/components/card/test/translucent/index.html
+++ b/packages/core/src/components/card/test/translucent/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Card - Basic</ion-title>
@@ -238,7 +238,7 @@
 
         </ion-card>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/checkbox/test/basic/index.html b/packages/core/src/components/checkbox/test/basic/index.html
index 000728e47c..796192d62a 100644
--- a/packages/core/src/components/checkbox/test/basic/index.html
+++ b/packages/core/src/components/checkbox/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Checkbox - Basic</ion-title>
@@ -76,7 +76,7 @@
           <ion-checkbox disabled></ion-checkbox>
         </ion-item>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/chip/test/basic/index.html b/packages/core/src/components/chip/test/basic/index.html
index 5f27b7676c..bf5621865f 100644
--- a/packages/core/src/components/chip/test/basic/index.html
+++ b/packages/core/src/components/chip/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Chip - Basic</ion-title>
@@ -119,7 +119,6 @@
           </ion-chip>
         </ion-item>
       </ion-content>
-    </ion-page>
 
     <script>
       function del(chip) {
diff --git a/packages/core/src/components/content/test/basic/index.html b/packages/core/src/components/content/test/basic/index.html
index 8f26d5511a..c22c965518 100644
--- a/packages/core/src/components/content/test/basic/index.html
+++ b/packages/core/src/components/content/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header id="header">
         <ion-toolbar style="display: none" id="toolbar2">
           <ion-title>Hidden Toolbar</ion-title>
@@ -67,7 +67,6 @@
           <ion-title>Footer</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
 
     <script>
       function toggleFullscreen() {
diff --git a/packages/core/src/components/datetime/test/basic/index.html b/packages/core/src/components/datetime/test/basic/index.html
index 2cfa96701c..f84b09cbe8 100644
--- a/packages/core/src/components/datetime/test/basic/index.html
+++ b/packages/core/src/components/datetime/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Datetime - Basic</ion-title>
@@ -121,7 +121,6 @@
         </ion-list>
 
       </ion-content>
-    </ion-page>
 
     <script>
       var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
diff --git a/packages/core/src/components/events/test/basic/index.html b/packages/core/src/components/events/test/basic/index.html
index 485e03542c..2939c781cc 100644
--- a/packages/core/src/components/events/test/basic/index.html
+++ b/packages/core/src/components/events/test/basic/index.html
@@ -11,7 +11,7 @@
 <body onload="runTest()">
   <ion-events></ion-events>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Events</ion-title>
@@ -31,7 +31,7 @@
         <ion-button class="publish">Publish the data</ion-button>
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/fab/test/basic/index.html b/packages/core/src/components/fab/test/basic/index.html
index 27fd83a8d8..11eecdfed0 100644
--- a/packages/core/src/components/fab/test/basic/index.html
+++ b/packages/core/src/components/fab/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Floating Action Button - Basic</ion-title>
@@ -92,7 +92,6 @@
           <ion-title>Footer</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
 
     <script>
       function insertAfter(el, referenceNode) {
diff --git a/packages/core/src/components/fab/test/translucent/index.html b/packages/core/src/components/fab/test/translucent/index.html
index fa663840f3..4a7c1db768 100644
--- a/packages/core/src/components/fab/test/translucent/index.html
+++ b/packages/core/src/components/fab/test/translucent/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Floating Action Button - Translucent</ion-title>
@@ -98,7 +98,6 @@
           <ion-title>Footer</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
 
     <script>
       function insertAfter(el, referenceNode) {
diff --git a/packages/core/src/components/grid/test/basic/index.html b/packages/core/src/components/grid/test/basic/index.html
index f44df0a9c3..794b8f90db 100644
--- a/packages/core/src/components/grid/test/basic/index.html
+++ b/packages/core/src/components/grid/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Grid - Basic</ion-title>
@@ -265,7 +265,6 @@
         </ion-grid>
 
       </ion-content>
-    </ion-page>
 
     <style>
       .grid-demo ion-col div {
diff --git a/packages/core/src/components/hide-when/test/basic/index.html b/packages/core/src/components/hide-when/test/basic/index.html
index ba56964f56..a1f6312cbd 100644
--- a/packages/core/src/components/hide-when/test/basic/index.html
+++ b/packages/core/src/components/hide-when/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Hide when - Basic</ion-title>
@@ -94,7 +94,7 @@
 
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/icon/test/basic/index.html b/packages/core/src/components/icon/test/basic/index.html
index 688d5c1c89..51659a8c43 100644
--- a/packages/core/src/components/icon/test/basic/index.html
+++ b/packages/core/src/components/icon/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Icon - Basic</ion-title>
@@ -179,7 +179,7 @@
           font-size: 0.8em;
         }
       </style>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/icon/test/items/index.html b/packages/core/src/components/icon/test/items/index.html
index e79b104c3b..e24b377de5 100644
--- a/packages/core/src/components/icon/test/items/index.html
+++ b/packages/core/src/components/icon/test/items/index.html
@@ -16,7 +16,7 @@
 <body>
 
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Icon - Items</ion-title>
@@ -166,7 +166,7 @@
         </script>
 
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/infinite-scroll/test/basic/index.html b/packages/core/src/components/infinite-scroll/test/basic/index.html
index f0bd204971..d3b4c30dd6 100644
--- a/packages/core/src/components/infinite-scroll/test/basic/index.html
+++ b/packages/core/src/components/infinite-scroll/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
 
       <ion-header>
         <ion-toolbar>
@@ -36,7 +36,7 @@
         </ion-infinite-scroll>
       </ion-content>
 
-    </ion-page>
+
 
   </ion-app>
 
diff --git a/packages/core/src/components/input/test/attributes/index.html b/packages/core/src/components/input/test/attributes/index.html
index cde5e224ad..69f51121cb 100644
--- a/packages/core/src/components/input/test/attributes/index.html
+++ b/packages/core/src/components/input/test/attributes/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Input - Attributes</ion-title>
@@ -78,7 +78,6 @@
 
         </ion-list>
       </ion-content>
-    </ion-page>
 
     <script>
       var numberInput = checkInput('input1');
diff --git a/packages/core/src/components/input/test/basic/index.html b/packages/core/src/components/input/test/basic/index.html
index d9bdeb3767..fe86387231 100644
--- a/packages/core/src/components/input/test/basic/index.html
+++ b/packages/core/src/components/input/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Input - Basic</ion-title>
@@ -93,7 +93,6 @@
         </ion-item>
 
       </ion-content>
-    </ion-page>
 
     <script>
       function toggleBoolean(id, prop) {
diff --git a/packages/core/src/components/item-sliding/test/basic/index.html b/packages/core/src/components/item-sliding/test/basic/index.html
index 8bc9835790..e414cbb745 100644
--- a/packages/core/src/components/item-sliding/test/basic/index.html
+++ b/packages/core/src/components/item-sliding/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Sliding - Basic</ion-title>
@@ -422,7 +422,7 @@
           }
         </style>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/item/test/basic/index.html b/packages/core/src/components/item/test/basic/index.html
index 241b9e36a2..8046ffa724 100644
--- a/packages/core/src/components/item/test/basic/index.html
+++ b/packages/core/src/components/item/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item - Basic</ion-title>
@@ -109,7 +109,7 @@
           <ion-title>Footer</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/item/test/buttons/index.html b/packages/core/src/components/item/test/buttons/index.html
index a3c2c9ed07..0171567c3b 100644
--- a/packages/core/src/components/item/test/buttons/index.html
+++ b/packages/core/src/components/item/test/buttons/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Items as Links/Buttons</ion-title>
@@ -132,7 +132,7 @@
         </ion-item>
 
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/item/test/colors/index.html b/packages/core/src/components/item/test/colors/index.html
index 1e837fde03..986aa2455f 100644
--- a/packages/core/src/components/item/test/colors/index.html
+++ b/packages/core/src/components/item/test/colors/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Colors</ion-title>
@@ -109,7 +109,7 @@
           </ion-item>
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/item/test/dividers/index.html b/packages/core/src/components/item/test/dividers/index.html
index 24718623b2..d3e8caf9e6 100644
--- a/packages/core/src/components/item/test/dividers/index.html
+++ b/packages/core/src/components/item/test/dividers/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Divider</ion-title>
@@ -145,7 +145,7 @@
           height: 100px;
         }
       </style>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/item/test/groups/index.html b/packages/core/src/components/item/test/groups/index.html
index 3c8b59e80d..9db98fb8c3 100644
--- a/packages/core/src/components/item/test/groups/index.html
+++ b/packages/core/src/components/item/test/groups/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Groups</ion-title>
@@ -27,7 +27,7 @@
           <!-- list loaded from data -->
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/item/test/icons/index.html b/packages/core/src/components/item/test/icons/index.html
index 4c3ff5e6a8..f810ba3824 100644
--- a/packages/core/src/components/item/test/icons/index.html
+++ b/packages/core/src/components/item/test/icons/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Icons</ion-title>
@@ -109,7 +109,7 @@
           <ion-badge slot="end">99</ion-badge>
         </ion-item>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/item/test/images/index.html b/packages/core/src/components/item/test/images/index.html
index 2c838468e3..448938250e 100644
--- a/packages/core/src/components/item/test/images/index.html
+++ b/packages/core/src/components/item/test/images/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Images</ion-title>
@@ -90,7 +90,7 @@
           </ion-label>
         </ion-item>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <style>
diff --git a/packages/core/src/components/item/test/inputs/index.html b/packages/core/src/components/item/test/inputs/index.html
index d133e85165..dcd2734d41 100644
--- a/packages/core/src/components/item/test/inputs/index.html
+++ b/packages/core/src/components/item/test/inputs/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item inputs</ion-title>
@@ -81,7 +81,7 @@
           </ion-item>
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/item/test/media/index.html b/packages/core/src/components/item/test/media/index.html
index 60f798ad4b..41e6bc9d03 100644
--- a/packages/core/src/components/item/test/media/index.html
+++ b/packages/core/src/components/item/test/media/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Media</ion-title>
@@ -89,7 +89,7 @@
           <ion-icon name="close-circle" slot="end"></ion-icon>
         </ion-item>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/item/test/reorder/index.html b/packages/core/src/components/item/test/reorder/index.html
index ec6b14e4b2..7f9f2f664d 100644
--- a/packages/core/src/components/item/test/reorder/index.html
+++ b/packages/core/src/components/item/test/reorder/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title>Item Reorder</ion-title>
@@ -34,7 +34,7 @@
           <ion-reorder-group id="endGroup"></ion-reorder-group>
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <style>
diff --git a/packages/core/src/components/item/test/sliding/index.html b/packages/core/src/components/item/test/sliding/index.html
index 714c47853f..cf3f092996 100644
--- a/packages/core/src/components/item/test/sliding/index.html
+++ b/packages/core/src/components/item/test/sliding/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Sliding - Basic</ion-title>
@@ -405,7 +405,7 @@
           }
         </style>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/item/test/text/index.html b/packages/core/src/components/item/test/text/index.html
index 4135e9ed88..d53cce4560 100644
--- a/packages/core/src/components/item/test/text/index.html
+++ b/packages/core/src/components/item/test/text/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Text</ion-title>
@@ -113,7 +113,7 @@
         </ion-item>
 
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/label/test/basic/index.html b/packages/core/src/components/label/test/basic/index.html
index 5ea82cf61d..5acdbe0eb2 100644
--- a/packages/core/src/components/label/test/basic/index.html
+++ b/packages/core/src/components/label/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Label - Basic</ion-title>
@@ -46,7 +46,7 @@
         }
       </style>
 
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/list/test/basic/index.html b/packages/core/src/components/list/test/basic/index.html
index 92982e17c2..0bb09de07d 100644
--- a/packages/core/src/components/list/test/basic/index.html
+++ b/packages/core/src/components/list/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>List - Basic</ion-title>
@@ -38,7 +38,7 @@
         </ion-list>
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/loading/test/basic/index.html b/packages/core/src/components/loading/test/basic/index.html
index b79194a908..871e6ca62e 100644
--- a/packages/core/src/components/loading/test/basic/index.html
+++ b/packages/core/src/components/loading/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Loading - Basic</ion-title>
@@ -57,7 +57,7 @@
           </ion-row>
         </ion-grid>
       </ion-content>
-    </ion-page>
+
   </ion-app>
   <script>
     async function presentLoading() {
diff --git a/packages/core/src/components/menu-toggle/test/basic/index.html b/packages/core/src/components/menu-toggle/test/basic/index.html
index 9d7decb5a1..6f1b5ec51c 100644
--- a/packages/core/src/components/menu-toggle/test/basic/index.html
+++ b/packages/core/src/components/menu-toggle/test/basic/index.html
@@ -55,7 +55,7 @@
       </ion-content>
     </ion-menu>
 
-    <ion-page main>
+    <div class="ion-page" main>
 
       <ion-header>
         <ion-toolbar>
@@ -81,7 +81,7 @@
             <ion-button onclick="openRight()">Menu Button Will Open Right</ion-button>
         </div>
       </ion-content>
-    </ion-page>
+
 
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
diff --git a/packages/core/src/components/menu-toggle/test/button/index.html b/packages/core/src/components/menu-toggle/test/button/index.html
index 4f1758d81e..5d9d638106 100644
--- a/packages/core/src/components/menu-toggle/test/button/index.html
+++ b/packages/core/src/components/menu-toggle/test/button/index.html
@@ -43,7 +43,7 @@
 
     </ion-menu>
 
-    <ion-page main>
+    <div class="ion-page" main>
 
       <ion-header>
         <ion-toolbar>
@@ -56,7 +56,8 @@
           <ion-button>Toggle Menu</ion-button>
         </ion-menu-toggle>
       </ion-content>
-    </ion-page>
+
+    </div>
 
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
diff --git a/packages/core/src/components/menu-toggle/test/list/index.html b/packages/core/src/components/menu-toggle/test/list/index.html
index 42090b8821..0978888434 100644
--- a/packages/core/src/components/menu-toggle/test/list/index.html
+++ b/packages/core/src/components/menu-toggle/test/list/index.html
@@ -30,7 +30,7 @@
 
     </ion-menu>
 
-    <ion-page main>
+    <div class="ion-page" main>
 
       <ion-header>
         <ion-toolbar>
@@ -233,8 +233,7 @@
             </ion-item>
           </ion-menu-toggle>
       </ion-content>
-    </ion-page>
-
+    </div>
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
 </body>
diff --git a/packages/core/src/components/menu/test/basic/index.html b/packages/core/src/components/menu/test/basic/index.html
index e45297da6c..2ec3eda9c3 100644
--- a/packages/core/src/components/menu/test/basic/index.html
+++ b/packages/core/src/components/menu/test/basic/index.html
@@ -64,7 +64,7 @@
       </ion-content>
     </ion-menu>
 
-    <ion-page main>
+    <div class="ion-page" main>
 
       <ion-header>
         <ion-toolbar>
@@ -94,7 +94,7 @@
 
       </ion-content>
 
-    </ion-page>
+    </div>
 
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
diff --git a/packages/core/src/components/menu/test/standalone/index.html b/packages/core/src/components/menu/test/standalone/index.html
index 0db40cfd3c..26d3c35fbf 100644
--- a/packages/core/src/components/menu/test/standalone/index.html
+++ b/packages/core/src/components/menu/test/standalone/index.html
@@ -41,7 +41,7 @@
 
   </ion-menu>
 
-  <ion-page main>
+  <div class="ion-page" main>
 
     <ion-header>
       <ion-toolbar>
@@ -62,8 +62,7 @@
         <button onclick="setEnabled()">Set Swipe Enabled False</button>
       </p>
     </ion-content>
-
-  </ion-page>
+  </div>
 
   <style>
     body {
diff --git a/packages/core/src/components/modal-controller/readme.md b/packages/core/src/components/modal-controller/readme.md
index 2f2ca64930..a5bcd80ca4 100644
--- a/packages/core/src/components/modal-controller/readme.md
+++ b/packages/core/src/components/modal-controller/readme.md
@@ -10,7 +10,7 @@ async function presentModal() {
   await modalController.componentOnReady();
 
   // create component to open
-  const element = document.createElement('ion-page');
+  const element = document.createElement('div');
   element.innerHTML = `
   <ion-header>
     <ion-toolbar>
diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md
index 05952598be..e00ad338f0 100644
--- a/packages/core/src/components/modal/readme.md
+++ b/packages/core/src/components/modal/readme.md
@@ -15,7 +15,7 @@ async function presentModal() {
   await modalController.componentOnReady();
 
   // create component to open
-  const element = document.createElement('ion-page');
+  const element = document.createElement('div');
   element.innerHTML = `
   <ion-header>
     <ion-toolbar>
diff --git a/packages/core/src/components/modal/test/basic/index.html b/packages/core/src/components/modal/test/basic/index.html
index 43866e9c87..7791920de0 100644
--- a/packages/core/src/components/modal/test/basic/index.html
+++ b/packages/core/src/components/modal/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Modal - Basic</ion-title>
@@ -23,7 +23,7 @@
           <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
         </p>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
@@ -36,7 +36,7 @@
       await modalController.componentOnReady();
 
       // create component to open
-      const element = document.createElement('ion-page');
+      const element = document.createElement('div');
       element.innerHTML = `
       <ion-header>
         <ion-toolbar>
diff --git a/packages/core/src/components/modal/test/host-elements/index.html b/packages/core/src/components/modal/test/host-elements/index.html
index 4998ec289c..b570bcda50 100644
--- a/packages/core/src/components/modal/test/host-elements/index.html
+++ b/packages/core/src/components/modal/test/host-elements/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Modal - Host Elements</ion-title>
@@ -23,7 +23,7 @@
           <ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
         </p>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
@@ -33,7 +33,7 @@
     class ModalPage extends HTMLElement {
       async connectedCallback() {
         this.innerHTML = `
-        <ion-page>
+
           <ion-header>
             <ion-toolbar>
               <ion-title>Super Modal</ion-title>
@@ -43,8 +43,7 @@
             <h1>Content of doom</h1>
             <div>Here's some more content</div>
             <ion-button class="dismiss">Dismiss Modal</ion-button>
-          </ion-content>
-        </ion-page>`;
+          </ion-content>`;
 
           // listen for close event
         const button = this.querySelector('ion-button');
diff --git a/packages/core/src/components/nav-pop/test/basic/index.html b/packages/core/src/components/nav-pop/test/basic/index.html
index 4b1778d83e..becac11b31 100644
--- a/packages/core/src/components/nav-pop/test/basic/index.html
+++ b/packages/core/src/components/nav-pop/test/basic/index.html
@@ -30,7 +30,7 @@
   async function loadFirstPage() {
     const nav = document.querySelector('ion-nav');
     await nav.componentOnReady();
-    const firstPage = document.createElement('ion-page');
+    const firstPage = document.createElement('div');
     firstPage.classList.add('first-page');
     firstPage.innerHTML = `
       <ion-header>
@@ -54,7 +54,7 @@
   }
 
   async function goToPageTwo(nav) {
-    const secondPage = document.createElement('ion-page');
+    const secondPage = document.createElement('div');
     secondPage.classList.add('second-page');
     secondPage.innerHTML = `
       <ion-header>
@@ -81,7 +81,7 @@
   }
 
   async function goToPageThree(nav) {
-    const thirdPage = document.createElement('ion-page');
+    const thirdPage = document.createElement('div');
     thirdPage.classList.add('third-page');
     thirdPage.innerHTML = `
       <ion-header>
diff --git a/packages/core/src/components/nav-push/test/basic/index.html b/packages/core/src/components/nav-push/test/basic/index.html
index 0df74408db..4f590507b8 100644
--- a/packages/core/src/components/nav-push/test/basic/index.html
+++ b/packages/core/src/components/nav-push/test/basic/index.html
@@ -30,7 +30,7 @@
   class FirstPage extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -42,7 +42,6 @@
             <ion-button class="next">Go to Page Two</ion-button>
           </ion-nav-push>
         </ion-content>
-      </ion-page>
       `;
     }
   }
@@ -50,7 +49,7 @@
   class SecondPage extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page Two</ion-title>
@@ -65,7 +64,6 @@
             <ion-button class="back">Go Back</ion-button>
           </ion-nav-pop>
         </ion-content>
-      </ion-page>
       `;
     }
   }
@@ -73,7 +71,7 @@
   class ThirdPage extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page Three</ion-title>
@@ -85,7 +83,6 @@
             <ion-button class="back">Go Back</ion-button>
           </ion-nav-pop>
         </ion-content>
-      </ion-page>
       `;
     }
   }
diff --git a/packages/core/src/components/nav-set-root/test/basic/index.html b/packages/core/src/components/nav-set-root/test/basic/index.html
index 2663312e64..68209ed8d8 100644
--- a/packages/core/src/components/nav-set-root/test/basic/index.html
+++ b/packages/core/src/components/nav-set-root/test/basic/index.html
@@ -17,7 +17,7 @@
   class FirstPage extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -29,7 +29,6 @@
             <ion-button class="next">Go to Page Two</ion-button>
           </ion-nav-set-root>
         </ion-content>
-      </ion-page>
       `;
     }
   }
@@ -37,7 +36,7 @@
   class SecondPage extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page Two</ion-title>
@@ -49,7 +48,6 @@
             <ion-button class="next">Go to Page Three</ion-button>
           </ion-nav-set-root>
         </ion-content>
-      </ion-page>
       `;
     }
   }
@@ -57,7 +55,6 @@
   class ThirdPage extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
         <ion-header>
           <ion-toolbar>
             <ion-title>Page Three</ion-title>
@@ -66,7 +63,6 @@
         <ion-content padding>
           <h1>Page Three</h1>
         </ion-content>
-      </ion-page>
       `;
     }
   }
diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx
index aebe520ef9..454072975d 100644
--- a/packages/core/src/components/nav/nav.tsx
+++ b/packages/core/src/components/nav/nav.tsx
@@ -985,6 +985,7 @@ export function attachViewToDom(nav: Nav, enteringView: ViewController, ti: Tran
     return ti.delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, [], ti.escapeHatch).then((mountingData) => {
       ti.mountingData = mountingData;
       Object.assign(enteringView, mountingData);
+      mountingData.element.classList.add('ion-page');
       enteringView.state = STATE_ATTACHED;
     })
     // implicit returns FTW
diff --git a/packages/core/src/components/nav/test/basic/index.html b/packages/core/src/components/nav/test/basic/index.html
index 11fe138b16..b9fdbce2bd 100644
--- a/packages/core/src/components/nav/test/basic/index.html
+++ b/packages/core/src/components/nav/test/basic/index.html
@@ -9,7 +9,7 @@
     class PageOne extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-title>Page One</ion-title>
@@ -21,7 +21,6 @@
                 <ion-button class="next">Go to Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
         `;
       }
     }
@@ -29,7 +28,7 @@
     class PageTwo extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -47,7 +46,6 @@
               </div>
 
             </ion-content>
-          </ion-page>
         `;
       }
     }
@@ -55,7 +53,7 @@
     class PageThree extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -67,7 +65,6 @@
             <ion-content padding>
               <h1>Page Three</h1>
             </ion-content>
-          </ion-page>
         `;
       }
     }
diff --git a/packages/core/src/components/nav/test/host-elements/index.html b/packages/core/src/components/nav/test/host-elements/index.html
index 0b0a6078b8..b10dd8328b 100644
--- a/packages/core/src/components/nav/test/host-elements/index.html
+++ b/packages/core/src/components/nav/test/host-elements/index.html
@@ -17,7 +17,7 @@
   class PageOne extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -26,8 +26,7 @@
         <ion-content padding>
           <h1>Page One</h1>
           <ion-button class="next">Go to Page Two</ion-button>
-        </ion-content>
-      </ion-page>`;
+        </ion-content>`;
 
       const button = this.querySelector('ion-button');
       button.addEventListener('click', async () => {
@@ -39,7 +38,7 @@
   class PageTwo extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-        <ion-page>
+
           <ion-header>
             <ion-toolbar>
               <ion-title>Page Two</ion-title>
@@ -49,8 +48,7 @@
             <h1>Page Two</h1>
             <ion-button class="next">Go to Page Three</ion-button>
             <ion-button class="previous">Go Back</ion-button>
-          </ion-content>
-        </ion-page>`;
+          </ion-content>`;
 
       const previousButton = this.querySelector('ion-button.previous');
       previousButton.addEventListener('click', async () => {
@@ -67,7 +65,7 @@
   class PageThree extends HTMLElement {
     async connectedCallback() {
       this.innerHTML = `
-        <ion-page>
+
           <ion-header>
             <ion-toolbar>
               <ion-title>Page Three</ion-title>
@@ -76,8 +74,7 @@
           <ion-content padding>
             <h1>Page Three</h1>
             <ion-button class="previous">Go Back</ion-button>
-          </ion-content>
-        </ion-page>`;
+          </ion-content>`;
 
       const previousButton = this.querySelector('ion-button.previous');
       previousButton.addEventListener('click', async () => {
diff --git a/packages/core/src/components/nav/test/nav-then-tabs/index.html b/packages/core/src/components/nav/test/nav-then-tabs/index.html
index ec231e47e1..e9e3eab0ec 100644
--- a/packages/core/src/components/nav/test/nav-then-tabs/index.html
+++ b/packages/core/src/components/nav/test/nav-then-tabs/index.html
@@ -10,7 +10,7 @@
       class PageOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -25,7 +25,6 @@
                 <ion-button class="next">Go to Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
           `;
         }
       }
@@ -41,7 +40,7 @@
       class PageTwoSectionOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -59,7 +58,6 @@
                 <ion-button class="previous">Go Back</ion-button>
               </div>
             </ion-content>
-          </ion-page>
           `;
 
           const button = this.querySelector('ion-button.previous');
@@ -75,7 +73,7 @@
       class PageTwoSectionTwo extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -90,7 +88,6 @@
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
           `;
         }
       }
@@ -98,7 +95,7 @@
       class PageThree extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -113,7 +110,7 @@
                   <ion-button class="previous">Go Back</ion-button>
               </ion-nav-pop>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -121,7 +118,7 @@
       class LoginPage extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -136,7 +133,7 @@
                 <ion-button>Login</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -162,7 +159,7 @@
       class TabOnePageOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -177,7 +174,7 @@
                 <ion-button class="next">Go to Tab One Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -185,7 +182,7 @@
       class TabOnePageTwo extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -202,7 +199,7 @@
                 </ion-nav-push>
               </div>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -210,7 +207,7 @@
       class TabOnePageThree extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -222,7 +219,7 @@
             <ion-content padding>
               <h1>Tab One Page Three</h1>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -230,7 +227,7 @@
       class TabTwoPageOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -245,7 +242,7 @@
                 <ion-button class="next">Go to Tab Two Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -253,7 +250,7 @@
       class TabTwoPageTwo extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -270,7 +267,7 @@
                 </ion-nav-push>
               </div>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -278,7 +275,7 @@
       class TabTwoPageThree extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -290,7 +287,7 @@
             <ion-content padding>
               <h1>Tab Two Page Three</h1>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -298,7 +295,7 @@
       class TabThreePageOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -313,7 +310,7 @@
                 <ion-button class="next">Go to Tab Three Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -321,7 +318,7 @@
       class TabThreePageTwo extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -338,7 +335,7 @@
                 </ion-nav-push>
               </div>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
@@ -346,7 +343,7 @@
       class TabThreePageThree extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -358,7 +355,7 @@
             <ion-content padding>
               <h1>Tab Three Page Three</h1>
             </ion-content>
-          </ion-page>
+
           `;
         }
       }
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 746bcdbe67..999e411d8b 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
@@ -10,7 +10,7 @@
       class PageOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -25,7 +25,6 @@
                 <ion-button class="next">Go to Page Two</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
           `;
         }
       }
@@ -41,7 +40,7 @@
       class PageTwoSectionOne extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -59,7 +58,6 @@
                 <ion-button class="previous">Go Back</ion-button>
               </div>
             </ion-content>
-          </ion-page>
           `;
 
           const button = this.querySelector('ion-button.previous');
@@ -75,7 +73,7 @@
       class PageTwoSectionTwo extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -90,7 +88,6 @@
                 <ion-button class="next">Go to Page Three</ion-button>
               </ion-nav-push>
             </ion-content>
-          </ion-page>
           `;
         }
       }
@@ -98,7 +95,7 @@
       class PageThree extends HTMLElement {
         connectedCallback() {
           this.innerHTML = `
-          <ion-page>
+
             <ion-header>
               <ion-toolbar>
                 <ion-buttons slot="start">
@@ -113,7 +110,6 @@
                   <ion-button class="previous">Go Back</ion-button>
               </ion-nav-pop>
             </ion-content>
-          </ion-page>
           `;
         }
       }
diff --git a/packages/core/src/components/nav/transitions/transition.md.ts b/packages/core/src/components/nav/transitions/transition.md.ts
index b5e019a9ad..1d2617d487 100644
--- a/packages/core/src/components/nav/transitions/transition.md.ts
+++ b/packages/core/src/components/nav/transitions/transition.md.ts
@@ -63,10 +63,10 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View
 }
 
 function getIonPageElement(element: HTMLElement) {
-  if (element.tagName.toLowerCase() === 'ion-page') {
+  if (element.classList.contains('ion-page')) {
     return element;
   }
-  const ionPage = element.querySelector('ion-page');
+  const ionPage = element.querySelector('.ion-page');
   if (ionPage) {
     return ionPage;
   }
diff --git a/packages/core/src/components/note/test/basic/index.html b/packages/core/src/components/note/test/basic/index.html
index 7f85c7af04..c1a5a23c26 100644
--- a/packages/core/src/components/note/test/basic/index.html
+++ b/packages/core/src/components/note/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Note - Basic</ion-title>
@@ -130,7 +130,7 @@
         </ion-list>
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/page/page.tsx b/packages/core/src/components/page/page.tsx
deleted file mode 100644
index a16198e15e..0000000000
--- a/packages/core/src/components/page/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@stencil/core';
-
-
-@Component({
-  tag: 'ion-page',
-})
-export class Page {
-
-  hostData() {
-    return {
-      class: {
-        'ion-page': true
-      }
-    };
-  }
-  render() {
-    return <slot></slot>;
-  }
-}
diff --git a/packages/core/src/components/page/readme.md b/packages/core/src/components/page/readme.md
deleted file mode 100644
index 9c69a427e9..0000000000
--- a/packages/core/src/components/page/readme.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ion-page
-
-
-
-<!-- Auto Generated Below -->
-
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/core/src/components/page/test/basic/index.html b/packages/core/src/components/page/test/basic/index.html
index 22675cd622..6e9d61b297 100644
--- a/packages/core/src/components/page/test/basic/index.html
+++ b/packages/core/src/components/page/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Page - Basic</ion-title>
@@ -20,7 +20,7 @@
       <ion-content padding>
         Ion Page Content
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/page/test/host-element/index.html b/packages/core/src/components/page/test/host-element/index.html
index 4eaec6b11c..bac657e85d 100644
--- a/packages/core/src/components/page/test/host-element/index.html
+++ b/packages/core/src/components/page/test/host-element/index.html
@@ -12,7 +12,7 @@
   class PageOne extends HTMLElement {
     connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
diff --git a/packages/core/src/components/page/test/no-ion-app-basic/index.html b/packages/core/src/components/page/test/no-ion-app-basic/index.html
index 77bac68ff6..40f3f4e976 100644
--- a/packages/core/src/components/page/test/no-ion-app-basic/index.html
+++ b/packages/core/src/components/page/test/no-ion-app-basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div style="height: 300px">
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Page - No Ion App Basic</ion-title>
@@ -20,8 +20,6 @@
       <ion-content padding>
         Ion Page Content
       </ion-content>
-    </ion-page>
-  </div>
 </body>
 
 </html>
diff --git a/packages/core/src/components/page/test/no-ion-app-host-element/index.html b/packages/core/src/components/page/test/no-ion-app-host-element/index.html
index 29cac5fa05..bbc037ca67 100644
--- a/packages/core/src/components/page/test/no-ion-app-host-element/index.html
+++ b/packages/core/src/components/page/test/no-ion-app-host-element/index.html
@@ -12,7 +12,7 @@
   class PageOne extends HTMLElement {
     connectedCallback() {
       this.innerHTML = `
-      <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>No Ion App Page One</ion-title>
diff --git a/packages/core/src/components/platform/test/basic/index.html b/packages/core/src/components/platform/test/basic/index.html
index 24101e0737..17a69c5dca 100644
--- a/packages/core/src/components/platform/test/basic/index.html
+++ b/packages/core/src/components/platform/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body onload="initialize()">
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Platform - basic</ion-title>
@@ -29,7 +29,7 @@
         <h2>The ready event has fired: <span class="ready"></span></h2>
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/popover/test/basic/index.html b/packages/core/src/components/popover/test/basic/index.html
index 54f30ccd85..48b40febb7 100644
--- a/packages/core/src/components/popover/test/basic/index.html
+++ b/packages/core/src/components/popover/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar color="primary">
           <ion-buttons slot="start">
@@ -41,7 +41,7 @@
           <ion-title>Popover</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
+
   </ion-app>
   <script>
 
diff --git a/packages/core/src/components/radio-group/test/basic/index.html b/packages/core/src/components/radio-group/test/basic/index.html
index d93392f0ed..d062c90655 100644
--- a/packages/core/src/components/radio-group/test/basic/index.html
+++ b/packages/core/src/components/radio-group/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
 
       <ion-header>
         <ion-toolbar>
@@ -47,8 +47,6 @@
         <ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button>
       </ion-content>
 
-    </ion-page>
-
     <script>
       var dynamicDisabled = document.getElementById('dynamicDisabled');
 
diff --git a/packages/core/src/components/radio-group/test/form/index.html b/packages/core/src/components/radio-group/test/form/index.html
index 451f486178..9cce10152e 100644
--- a/packages/core/src/components/radio-group/test/form/index.html
+++ b/packages/core/src/components/radio-group/test/form/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
 
       <ion-header>
         <ion-toolbar>
@@ -67,8 +67,6 @@
 
       </ion-content>
 
-    </ion-page>
-
     <script>
       var changes = 0;
 
diff --git a/packages/core/src/components/radio/test/basic/index.html b/packages/core/src/components/radio/test/basic/index.html
index 6815384579..3d4a6672db 100644
--- a/packages/core/src/components/radio/test/basic/index.html
+++ b/packages/core/src/components/radio/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Radio - Basic</ion-title>
@@ -135,7 +135,6 @@
         </ion-item>
 
       </ion-content>
-    </ion-page>
 
     <script>
       var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];
diff --git a/packages/core/src/components/range/test/basic/index.html b/packages/core/src/components/range/test/basic/index.html
index 5061c1bab0..2e2efee262 100644
--- a/packages/core/src/components/range/test/basic/index.html
+++ b/packages/core/src/components/range/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Range - Basic</ion-title>
@@ -99,7 +99,7 @@
 
         <ion-button onclick="elTest()">Test</ion-button>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/refresher/test/basic/index.html b/packages/core/src/components/refresher/test/basic/index.html
index 4ef095bdd4..96c4c656a8 100644
--- a/packages/core/src/components/refresher/test/basic/index.html
+++ b/packages/core/src/components/refresher/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
 
       <ion-header>
         <ion-toolbar>
@@ -31,7 +31,7 @@
 
       </ion-content>
 
-    </ion-page>
+
 
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
diff --git a/packages/core/src/components/reorder/test/basic/index.html b/packages/core/src/components/reorder/test/basic/index.html
index 313af8ce14..3ef87ebf79 100644
--- a/packages/core/src/components/reorder/test/basic/index.html
+++ b/packages/core/src/components/reorder/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Reorder - Basic</ion-title>
@@ -106,7 +106,7 @@
           </ion-reorder-group>
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/ripple-effect/test/basic/index.html b/packages/core/src/components/ripple-effect/test/basic/index.html
index 1b9988a0a9..72d7d33e10 100644
--- a/packages/core/src/components/ripple-effect/test/basic/index.html
+++ b/packages/core/src/components/ripple-effect/test/basic/index.html
@@ -19,7 +19,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button Effect - Basic</ion-title>
@@ -55,7 +55,7 @@
             <ion-ripple-effect></ion-ripple-effect>
           </div>
         </ion-content>
-    </ion-page>
+
   </ion-app>
   <script>
     function blockClicked() {
diff --git a/packages/core/src/components/searchbar/test/basic/index.html b/packages/core/src/components/searchbar/test/basic/index.html
index 87c1b8093e..09f8ba2504 100644
--- a/packages/core/src/components/searchbar/test/basic/index.html
+++ b/packages/core/src/components/searchbar/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Searchbar - Basic</ion-title>
@@ -111,7 +111,7 @@
           }
         </script>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/searchbar/test/toolbar/index.html b/packages/core/src/components/searchbar/test/toolbar/index.html
index dfeae9418f..7d7a5592a4 100644
--- a/packages/core/src/components/searchbar/test/toolbar/index.html
+++ b/packages/core/src/components/searchbar/test/toolbar/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header no-border translucent>
         <ion-toolbar>
           <ion-title>Searchbar - Toolbar</ion-title>
@@ -88,7 +88,7 @@
         </ion-toolbar>
 
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <style>
diff --git a/packages/core/src/components/segment/test/basic/index.html b/packages/core/src/components/segment/test/basic/index.html
index 637cb3c8c0..c5dbce343a 100644
--- a/packages/core/src/components/segment/test/basic/index.html
+++ b/packages/core/src/components/segment/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body onload="listenForEvent()">
   <ion-app>
-    <ion-page>
+
       <ion-header no-border>
         <ion-toolbar>
           <ion-title>Segment - Basic</ion-title>
@@ -189,7 +189,7 @@
 
         </script>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/select/test/basic/index.html b/packages/core/src/components/select/test/basic/index.html
index 21e9ac733b..c6b8781fa9 100644
--- a/packages/core/src/components/select/test/basic/index.html
+++ b/packages/core/src/components/select/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Select - Basic</ion-title>
@@ -246,7 +246,6 @@
         </div>
 
       </ion-content>
-    </ion-page>
 
     <script>
       var pets = document.getElementById('pets');
diff --git a/packages/core/src/components/select/test/multiple-value/index.html b/packages/core/src/components/select/test/multiple-value/index.html
index d21ceafed4..cc50a03a34 100644
--- a/packages/core/src/components/select/test/multiple-value/index.html
+++ b/packages/core/src/components/select/test/multiple-value/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Select Item: Multiple Value</ion-title>
@@ -111,7 +111,6 @@
         </ion-item>
 
       </ion-content>
-    </ion-page>
 
     <script>
       var toppings = document.getElementById('toppings');
diff --git a/packages/core/src/components/select/test/single-value/index.html b/packages/core/src/components/select/test/single-value/index.html
index d78ea676bc..ce1d1c141f 100644
--- a/packages/core/src/components/select/test/single-value/index.html
+++ b/packages/core/src/components/select/test/single-value/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Select Item: Single Value</ion-title>
@@ -155,7 +155,6 @@
           <br>
         </p>
       </ion-content>
-    </ion-page>
 
     <script>
       let selects = document.querySelectorAll('ion-select');
diff --git a/packages/core/src/components/show-when/test/basic/index.html b/packages/core/src/components/show-when/test/basic/index.html
index ff9c38a580..78351ef4a8 100644
--- a/packages/core/src/components/show-when/test/basic/index.html
+++ b/packages/core/src/components/show-when/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Show when - Basic</ion-title>
@@ -94,7 +94,7 @@
 
       </ion-content>
 
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/slides/test/app-intro/index.html b/packages/core/src/components/slides/test/app-intro/index.html
index b8f7efe38e..35cc6a538b 100644
--- a/packages/core/src/components/slides/test/app-intro/index.html
+++ b/packages/core/src/components/slides/test/app-intro/index.html
@@ -29,7 +29,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
@@ -79,7 +79,7 @@
           </ion-slide>
         </ion-slides>
       </ion-content>
-    </ion-page>
+
   </ion-app>
   <script>
     const slides = document.querySelector('.slides')
diff --git a/packages/core/src/components/slides/test/basic/index.html b/packages/core/src/components/slides/test/basic/index.html
index 85dadb6e44..35a68eaa36 100644
--- a/packages/core/src/components/slides/test/basic/index.html
+++ b/packages/core/src/components/slides/test/basic/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-content id="content">
         <ion-slides style="background: black" id="slides" pager>
           <ion-slide style="background: red; color: white;">
@@ -43,7 +43,7 @@
         <ion-button expand="block" onclick="slideStopAutoPlay()">Stop auto play</ion-button>
         <ion-button expand="block" onclick="setOptions()">Set options</ion-button>
       </ion-content>
-    </ion-page>
+
   </ion-app>
   <script>
     const slides = document.getElementById('slides')
diff --git a/packages/core/src/components/spinner/test/basic/index.html b/packages/core/src/components/spinner/test/basic/index.html
index 5efbdc2b7e..12eb01447c 100644
--- a/packages/core/src/components/spinner/test/basic/index.html
+++ b/packages/core/src/components/spinner/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Spinner - Basic</ion-title>
@@ -54,7 +54,7 @@
           </ion-item>
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/spinner/test/color/index.html b/packages/core/src/components/spinner/test/color/index.html
index 583770efc1..45a89bd96d 100644
--- a/packages/core/src/components/spinner/test/color/index.html
+++ b/packages/core/src/components/spinner/test/color/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Spinner - Color</ion-title>
@@ -54,7 +54,7 @@
           </ion-item>
         </ion-list>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/split-pane/test/basic/index.html b/packages/core/src/components/split-pane/test/basic/index.html
index ae184a4008..d391788bf8 100644
--- a/packages/core/src/components/split-pane/test/basic/index.html
+++ b/packages/core/src/components/split-pane/test/basic/index.html
@@ -45,7 +45,7 @@
 
       </ion-menu>
 
-      <ion-page main>
+      <div class='ion-page' main>
 
         <ion-header>
           <ion-toolbar>
@@ -70,7 +70,7 @@
           <f></f>
         </ion-content>
 
-      </ion-page>
+      </div>
     </ion-split-pane>
 
   </ion-app>
diff --git a/packages/core/src/components/status-tap/test/basic/index.html b/packages/core/src/components/status-tap/test/basic/index.html
index 428f89d8f8..eeb948dab6 100644
--- a/packages/core/src/components/status-tap/test/basic/index.html
+++ b/packages/core/src/components/status-tap/test/basic/index.html
@@ -11,7 +11,7 @@
 <body onload="init()">
   <ion-app>
     <ion-status-tap></ion-status-tap>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Status Tap - Basic</ion-title>
@@ -23,7 +23,7 @@
           <ion-button class="shawty-got-low">Mock Status Tap</ion-button>
         </div>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/tabs/test/basic/index.html b/packages/core/src/components/tabs/test/basic/index.html
index 526a1e19e1..83ccee926c 100644
--- a/packages/core/src/components/tabs/test/basic/index.html
+++ b/packages/core/src/components/tabs/test/basic/index.html
@@ -12,7 +12,7 @@
   <ion-app>
     <ion-tabs>
       <ion-tab title="Plain List" icon="star" path="">
-        <ion-page>
+
           <ion-header>
             <ion-toolbar>
               <ion-title>Tab One</ion-title>
@@ -21,11 +21,11 @@
           <ion-content padding>
             Tab One
           </ion-content>
-        </ion-page>
-      </ion-tab>
+
+        </ion-tab>
 
       <ion-tab title="Schedule" icon="globe" path="tab2">
-        <ion-page>
+
           <ion-header>
             <ion-toolbar>
               <ion-title>Tab Two</ion-title>
@@ -34,11 +34,11 @@
           <ion-content padding>
             Tab Two
           </ion-content>
-        </ion-page>
-      </ion-tab>
+
+        </ion-tab>
 
       <ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
-        <ion-page>
+
           <ion-header>
             <ion-toolbar>
               <ion-title>Tab Three</ion-title>
@@ -47,7 +47,7 @@
           <ion-content padding>
             Tab Three
           </ion-content>
-        </ion-page>
+
       </ion-tab>
 
       <ion-tab disabled
diff --git a/packages/core/src/components/tap-click/test/basic/index.html b/packages/core/src/components/tap-click/test/basic/index.html
index 1b9988a0a9..72d7d33e10 100644
--- a/packages/core/src/components/tap-click/test/basic/index.html
+++ b/packages/core/src/components/tap-click/test/basic/index.html
@@ -19,7 +19,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
         <ion-header>
           <ion-toolbar>
             <ion-title>Button Effect - Basic</ion-title>
@@ -55,7 +55,7 @@
             <ion-ripple-effect></ion-ripple-effect>
           </div>
         </ion-content>
-    </ion-page>
+
   </ion-app>
   <script>
     function blockClicked() {
diff --git a/packages/core/src/components/text/test/basic/index.html b/packages/core/src/components/text/test/basic/index.html
index 353e872f49..024b8764d4 100644
--- a/packages/core/src/components/text/test/basic/index.html
+++ b/packages/core/src/components/text/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Text - Basic</ion-title>
@@ -57,7 +57,7 @@
           <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
         </p>
 
-    </ion-page>
+
   </ion-app>
 
   <style>
diff --git a/packages/core/src/components/textarea/test/basic/index.html b/packages/core/src/components/textarea/test/basic/index.html
index baa629a747..3d1fd8efa0 100644
--- a/packages/core/src/components/textarea/test/basic/index.html
+++ b/packages/core/src/components/textarea/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Input - Textarea</ion-title>
@@ -91,7 +91,7 @@
           </ion-button>
         </div>
       </ion-content>
-    </ion-page>
+
     <script>
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);
diff --git a/packages/core/src/components/thumbnail/test/basic/index.html b/packages/core/src/components/thumbnail/test/basic/index.html
index 63d2dc1de0..0887d8ed76 100644
--- a/packages/core/src/components/thumbnail/test/basic/index.html
+++ b/packages/core/src/components/thumbnail/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Thumbnail - Basic</ion-title>
@@ -36,7 +36,7 @@
           <ion-label>Wide Thumbnail</ion-label>
         </ion-item>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 
diff --git a/packages/core/src/components/toast/test/basic/index.html b/packages/core/src/components/toast/test/basic/index.html
index a9bc1b6fb8..c879a5940a 100644
--- a/packages/core/src/components/toast/test/basic/index.html
+++ b/packages/core/src/components/toast/test/basic/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Toast - Basic</ion-title>
@@ -57,7 +57,7 @@
           </ion-row>
         </ion-grid>
       </ion-content>
-    </ion-page>
+
   </ion-app>
   <script>
     window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
diff --git a/packages/core/src/components/toggle/test/basic/index.html b/packages/core/src/components/toggle/test/basic/index.html
index 7f2213adf6..a3526bbdef 100644
--- a/packages/core/src/components/toggle/test/basic/index.html
+++ b/packages/core/src/components/toggle/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Toggle - Basic</ion-title>
@@ -77,7 +77,6 @@
           Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
         </p>
       </ion-content>
-    </ion-page>
 
     <script>
       function printForm(ev) {
diff --git a/packages/core/src/components/toolbar/test/basic/index.html b/packages/core/src/components/toolbar/test/basic/index.html
index c3bb34e573..49c5ac1818 100644
--- a/packages/core/src/components/toolbar/test/basic/index.html
+++ b/packages/core/src/components/toolbar/test/basic/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>Toolbar - Basic</ion-title>
@@ -28,7 +28,7 @@
           <ion-title>Footer Toolbar</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/toolbar/test/colors/index.html b/packages/core/src/components/toolbar/test/colors/index.html
index 4678037ad9..c6b519cec9 100644
--- a/packages/core/src/components/toolbar/test/colors/index.html
+++ b/packages/core/src/components/toolbar/test/colors/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-content id="content">
         <ion-toolbar>
           <ion-title>Toolbar</ion-title>
@@ -50,7 +50,7 @@
           <ion-title>Dark</ion-title>
         </ion-toolbar>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/toolbar/test/scenarios/index.html b/packages/core/src/components/toolbar/test/scenarios/index.html
index de1227ea4e..7c0d17a95c 100644
--- a/packages/core/src/components/toolbar/test/scenarios/index.html
+++ b/packages/core/src/components/toolbar/test/scenarios/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-content id="content">
         <ion-toolbar no-padding>
           <ion-title>This should have no padding</ion-title>
@@ -235,7 +235,7 @@
           </ion-segment>
         </ion-toolbar>
       </ion-content>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/src/components/toolbar/test/translucent/index.html b/packages/core/src/components/toolbar/test/translucent/index.html
index 0c4e96d97b..b15435a116 100644
--- a/packages/core/src/components/toolbar/test/translucent/index.html
+++ b/packages/core/src/components/toolbar/test/translucent/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header translucent>
         <ion-toolbar>
           <ion-title>Toolbar - Translucent</ion-title>
@@ -95,7 +95,7 @@
           <ion-title>Footer Toolbar - Translucent</ion-title>
         </ion-toolbar>
       </ion-footer>
-    </ion-page>
+
   </ion-app>
 
   <style>
diff --git a/packages/core/src/components/virtual-scroll/test/basic.html b/packages/core/src/components/virtual-scroll/test/basic.html
index 64f22bbb1e..8bd4fe015c 100644
--- a/packages/core/src/components/virtual-scroll/test/basic.html
+++ b/packages/core/src/components/virtual-scroll/test/basic.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
 
       <ion-header>
         <ion-toolbar>
@@ -28,7 +28,7 @@
         <ion-virtual-scroll id="virtual"></ion-virtual-scroll>
       </ion-content>
 
-    </ion-page>
+
 
   </ion-app>
 
diff --git a/packages/core/src/components/virtual-scroll/test/cards.html b/packages/core/src/components/virtual-scroll/test/cards.html
index dd55f663d4..4e3dd11a0b 100644
--- a/packages/core/src/components/virtual-scroll/test/cards.html
+++ b/packages/core/src/components/virtual-scroll/test/cards.html
@@ -10,7 +10,7 @@
 
 <body>
   <ion-app>
-    <ion-page>
+
 
       <ion-header>
         <ion-toolbar>
@@ -22,7 +22,7 @@
         <ion-virtual-scroll id="virtual"></ion-virtual-scroll>
       </ion-content>
 
-    </ion-page>
+
 
   </ion-app>
 
diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts
index 9bc9b08c49..b8e50be0c6 100644
--- a/packages/core/src/index.d.ts
+++ b/packages/core/src/index.d.ts
@@ -63,7 +63,6 @@ export * from './components/nav/nav';
 export * from './components/nav/nav-interfaces';
 export { ViewController } from './components/nav/view-controller';
 export { Note } from './components/note/note';
-export { Page } from './components/page/page';
 export { PickerColumnCmp } from './components/picker-column/picker-column';
 export * from './components/picker/picker';
 export { PickerController } from './components/picker-controller/picker-controller';
diff --git a/packages/core/src/themes/test/css-variables/index.html b/packages/core/src/themes/test/css-variables/index.html
index 771c61144d..5459aeb173 100644
--- a/packages/core/src/themes/test/css-variables/index.html
+++ b/packages/core/src/themes/test/css-variables/index.html
@@ -37,7 +37,7 @@
 </head>
 <body>
   <ion-app>
-    <ion-page>
+
       <ion-header>
         <ion-toolbar>
           <ion-title>CSS Variable - Basic</ion-title>
@@ -271,7 +271,7 @@
           </ion-item>
         </section>
       </div>
-    </ion-page>
+
   </ion-app>
 
   <script>
diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js
index b029dc3f83..0ce76485dc 100644
--- a/packages/core/stencil.config.js
+++ b/packages/core/stencil.config.js
@@ -30,7 +30,7 @@ exports.config = {
     { components: ['ion-loading', 'ion-loading-controller'] },
     { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
     { components: ['ion-modal', 'ion-modal-controller'] },
-    { components: ['ion-nav', 'ion-page', 'ion-back-button'] },
+    { components: ['ion-nav', 'ion-back-button'] },
     { components: ['ion-popover', 'ion-popover-controller'] },
     { components: ['ion-radio', 'ion-radio-group'] },
     { components: ['ion-reorder', 'ion-reorder-group'] },