diff --git a/demos/src/tabs/app.component.ts b/demos/src/tabs/app.component.ts
index 93eb66282a..ebbbe7044f 100644
--- a/demos/src/tabs/app.component.ts
+++ b/demos/src/tabs/app.component.ts
@@ -1,13 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   template: '<div>johnny utah</div>',
+  selector: 'tab-page'
 })
 export class TabPage {}
 
 
 @Component({
-  templateUrl: 'page.html'
+  templateUrl: 'page.html',
+  selector: 'api-demo-page',
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+      ion-tabs {
+        margin-bottom: 20px;
+      }
+    `,
+    `
+      ion-tabs,
+      ion-tabs .tabbar {
+        position: relative;
+        top: auto;
+        height: auto;
+        visibility: visible;
+        opacity: 1;
+      }
+    `
+  ]
 })
 export class ApiDemoPage {
   root = TabPage;
@@ -15,7 +35,8 @@ export class ApiDemoPage {
 
 
 @Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
+  template: '<ion-nav [root]="root"></ion-nav>',
+  selector: 'api-demo-app'
 })
 export class ApiDemoApp {
   root = ApiDemoPage;
diff --git a/demos/src/tabs/style.css b/demos/src/tabs/style.css
index defb7410ee..744f131bdd 100644
--- a/demos/src/tabs/style.css
+++ b/demos/src/tabs/style.css
@@ -1,16 +1,14 @@
-ion-tabs:first-child {
-  margin-top: 60px;
-}
-
-ion-tabs {
-  margin-bottom: 20px;
-}
-
-ion-tabs,
-ion-tabs .tabbar {
-  position: relative;
-  top: auto;
-  height: auto;
-  visibility: visible;
-  opacity: 1;
-}
+  ion-tabs:first-child {
+    margin-top: 60px;
+  }
+  ion-tabs {
+    margin-bottom: 20px;
+  }
+  ion-tabs,
+  ion-tabs .tabbar {
+    position: relative;
+    top: auto;
+    height: auto;
+    visibility: visible;
+    opacity: 1;
+  }