diff --git a/packages/core/src/components/app/app.tsx b/packages/core/src/components/app/app.tsx
index 2b759c76b8..603e3c7a9e 100644
--- a/packages/core/src/components/app/app.tsx
+++ b/packages/core/src/components/app/app.tsx
@@ -68,7 +68,7 @@ export class IonApp implements App {
     return null;
   }
 
-  render() {
+  protected render() {
     return ([
       <slot></slot>
     ]);
diff --git a/packages/core/src/components/avatar/avatar.tsx b/packages/core/src/components/avatar/avatar.tsx
index 34707f9d25..12351ae777 100644
--- a/packages/core/src/components/avatar/avatar.tsx
+++ b/packages/core/src/components/avatar/avatar.tsx
@@ -21,7 +21,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Avatar {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/badge/badge.tsx b/packages/core/src/components/badge/badge.tsx
index 5bc2ef1c3a..1da079730b 100644
--- a/packages/core/src/components/badge/badge.tsx
+++ b/packages/core/src/components/badge/badge.tsx
@@ -39,7 +39,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Badge {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index 45cfdbc489..da290f817e 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -163,7 +163,7 @@ export class Button {
    */
   @Prop() color: string;
 
-  render() {
+  protected render() {
     const buttonType = this.buttonType;
     const mode = this.mode;
 
diff --git a/packages/core/src/components/buttons/buttons.tsx b/packages/core/src/components/buttons/buttons.tsx
index 2e922d595e..cef0875566 100644
--- a/packages/core/src/components/buttons/buttons.tsx
+++ b/packages/core/src/components/buttons/buttons.tsx
@@ -17,7 +17,7 @@ export class Buttons {
     }
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/card-content/card-content.tsx b/packages/core/src/components/card-content/card-content.tsx
index ce59959a12..61d78fd82c 100644
--- a/packages/core/src/components/card-content/card-content.tsx
+++ b/packages/core/src/components/card-content/card-content.tsx
@@ -12,7 +12,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardContent {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/card-header/card-header.tsx b/packages/core/src/components/card-header/card-header.tsx
index 21c1be7c07..58132e8766 100644
--- a/packages/core/src/components/card-header/card-header.tsx
+++ b/packages/core/src/components/card-header/card-header.tsx
@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardHeader {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx
index 2b7fb03eb0..1ba2f162f7 100644
--- a/packages/core/src/components/card-title/card-title.tsx
+++ b/packages/core/src/components/card-title/card-title.tsx
@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardTitle {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 41a0a34a45..254e2ab92a 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -12,7 +12,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Card {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index e4f102aaf5..086bc97045 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -148,7 +148,7 @@ export class Checkbox {
     };
   }
 
-  render() {
+  protected render() {
     const checkboxClasses: CssClassMap = {
       'checkbox-icon': true,
       'checkbox-checked': this.checked
diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx
index abda3413ac..9c89fed9a8 100644
--- a/packages/core/src/components/chip-button/chip-button.tsx
+++ b/packages/core/src/components/chip-button/chip-button.tsx
@@ -72,7 +72,7 @@ export class ChipButton {
     return classList;
   }
 
-  render() {
+  protected render() {
     const buttonType = 'chip-button';
 
     const hostClasses = getElementClassObject(this.el.classList);
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
index 95289139a5..0db97b3e45 100644
--- a/packages/core/src/components/chip/chip.tsx
+++ b/packages/core/src/components/chip/chip.tsx
@@ -99,7 +99,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Chip {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx
index cb2e06d28a..98de804b42 100644
--- a/packages/core/src/components/content/content.tsx
+++ b/packages/core/src/components/content/content.tsx
@@ -78,7 +78,7 @@ export class Content {
   @Prop() fullscreen: boolean = false;
 
 
-  render() {
+  protected render() {
     const props: any = {};
     const scrollStyle: any = {};
 
diff --git a/packages/core/src/components/fab/fab-container.tsx b/packages/core/src/components/fab/fab-container.tsx
index 0b4d69eba3..89a114697d 100644
--- a/packages/core/src/components/fab/fab-container.tsx
+++ b/packages/core/src/components/fab/fab-container.tsx
@@ -98,7 +98,7 @@ export class FabContainer {
     fab.close();
   }
 
-  render() {
+  protected render() {
     return (
       <slot></slot>
     );
diff --git a/packages/core/src/components/fab/fab-list.tsx b/packages/core/src/components/fab/fab-list.tsx
index 0ee3f43024..56dffe7c5d 100644
--- a/packages/core/src/components/fab/fab-list.tsx
+++ b/packages/core/src/components/fab/fab-list.tsx
@@ -53,7 +53,7 @@ export class FabList {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <slot></slot>
     );
diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx
index fccaecc460..9d49507edf 100755
--- a/packages/core/src/components/fab/fab.tsx
+++ b/packages/core/src/components/fab/fab.tsx
@@ -151,7 +151,7 @@ export class FabButton {
     ];
   }
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'fab');
     const hostClasses = getElementClassObject(this.el.classList);
 
diff --git a/packages/core/src/components/fixed/fixed.tsx b/packages/core/src/components/fixed/fixed.tsx
index c04184a7f0..a13789107d 100644
--- a/packages/core/src/components/fixed/fixed.tsx
+++ b/packages/core/src/components/fixed/fixed.tsx
@@ -34,7 +34,7 @@ export class Fixed {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <slot></slot>
     );
diff --git a/packages/core/src/components/footer/footer.tsx b/packages/core/src/components/footer/footer.tsx
index 4496d0666a..f07a130140 100644
--- a/packages/core/src/components/footer/footer.tsx
+++ b/packages/core/src/components/footer/footer.tsx
@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Footer {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/header/header.tsx b/packages/core/src/components/header/header.tsx
index 2bddb5c997..c720c97667 100644
--- a/packages/core/src/components/header/header.tsx
+++ b/packages/core/src/components/header/header.tsx
@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Header {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
index 9e3e11cb39..75812dcc12 100644
--- a/packages/core/src/components/input/input.tsx
+++ b/packages/core/src/components/input/input.tsx
@@ -319,7 +319,7 @@ export class Input implements InputComponent {
   }
 
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 
diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
index 6579f6b027..c17341b2d0 100644
--- a/packages/core/src/components/input/textarea.tsx
+++ b/packages/core/src/components/input/textarea.tsx
@@ -298,7 +298,7 @@ export class Textarea implements TextareaComponent {
   }
 
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 
diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx
index f0550daf7e..5530e18507 100644
--- a/packages/core/src/components/item-divider/item-divider.tsx
+++ b/packages/core/src/components/item-divider/item-divider.tsx
@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class ItemDivider {
-  render() {
+  protected render() {
     return [
       <slot name='start'></slot>,
       <div class='item-inner'>
diff --git a/packages/core/src/components/item-sliding/item-option.tsx b/packages/core/src/components/item-sliding/item-option.tsx
index 740d0a2cd0..8d06996366 100644
--- a/packages/core/src/components/item-sliding/item-option.tsx
+++ b/packages/core/src/components/item-sliding/item-option.tsx
@@ -34,7 +34,7 @@ export class ItemOption {
     return !!ele;
   }
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'item-option-button');
 
     const TagType = this.href ? 'a' : 'button';
diff --git a/packages/core/src/components/item-sliding/item-options.tsx b/packages/core/src/components/item-sliding/item-options.tsx
index 8988890e93..dbb5108f4c 100644
--- a/packages/core/src/components/item-sliding/item-options.tsx
+++ b/packages/core/src/components/item-sliding/item-options.tsx
@@ -55,7 +55,7 @@ export class ItemOptions {
     return this.el.offsetWidth;
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx
index 423c919b8f..83c63fe1da 100644
--- a/packages/core/src/components/item-sliding/item-sliding.tsx
+++ b/packages/core/src/components/item-sliding/item-sliding.tsx
@@ -485,7 +485,7 @@ export class ItemSliding {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <ion-gesture {...{
         'canStart': this.canStart.bind(this),
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 98daf40ae7..6b865055b0 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -104,7 +104,7 @@ export class Item {
     return this.itemId + '-' + (++this.ids);
   }
 
-  render() {
+  protected render() {
     let childStyles = {};
 
     for (var key in this.itemStyles) {
diff --git a/packages/core/src/components/label/label.tsx b/packages/core/src/components/label/label.tsx
index 856f89e4b6..748287f90a 100644
--- a/packages/core/src/components/label/label.tsx
+++ b/packages/core/src/components/label/label.tsx
@@ -63,7 +63,7 @@ export class Label {
     });
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/list-header/list-header.tsx b/packages/core/src/components/list-header/list-header.tsx
index 463cf72619..e9cff6a22c 100644
--- a/packages/core/src/components/list-header/list-header.tsx
+++ b/packages/core/src/components/list-header/list-header.tsx
@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class ListHeader {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/list/list.tsx b/packages/core/src/components/list/list.tsx
index 46e6f52f3e..fe2dd4cddb 100644
--- a/packages/core/src/components/list/list.tsx
+++ b/packages/core/src/components/list/list.tsx
@@ -18,7 +18,7 @@ export class List {
 
   @State() openContainer: ItemSliding;
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index d6b2bf0979..6542f702d5 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -180,7 +180,7 @@ export class Menu {
     return this.isRightSide ? 'right' : 'left';
   }
 
-  render() {
+  protected render() {
     return ([
       <div class='menu-inner'>
         <slot></slot>
diff --git a/packages/core/src/components/nav-controller/nav-controller.tsx b/packages/core/src/components/nav-controller/nav-controller.tsx
index bc4e624f32..928e60a954 100644
--- a/packages/core/src/components/nav-controller/nav-controller.tsx
+++ b/packages/core/src/components/nav-controller/nav-controller.tsx
@@ -102,7 +102,7 @@ export class NavControllerImpl implements NavController {
     });
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx
index 80f8f9e13b..994cb913b7 100644
--- a/packages/core/src/components/nav/nav.tsx
+++ b/packages/core/src/components/nav/nav.tsx
@@ -124,7 +124,7 @@ export class IonNav implements Nav {
   }
 
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/nav/page-one.tsx b/packages/core/src/components/nav/page-one.tsx
index b14800a4a9..6962313712 100644
--- a/packages/core/src/components/nav/page-one.tsx
+++ b/packages/core/src/components/nav/page-one.tsx
@@ -16,7 +16,7 @@ export class PageOne {
     nav.push('page-two');
   }
 
-  render() {
+  protected render() {
     return [<ion-header>
       <ion-navbar>
         <ion-title>Page One</ion-title>
diff --git a/packages/core/src/components/nav/page-three.tsx b/packages/core/src/components/nav/page-three.tsx
index cc29e7ec3e..424037b684 100644
--- a/packages/core/src/components/nav/page-three.tsx
+++ b/packages/core/src/components/nav/page-three.tsx
@@ -16,7 +16,7 @@ export class PageThree {
     nav.pop();
   }
 
-  render() {
+  protected render() {
     return [<ion-header>
       <ion-navbar>
         <ion-title>Page Three</ion-title>
diff --git a/packages/core/src/components/nav/page-two.tsx b/packages/core/src/components/nav/page-two.tsx
index 44a281fe03..ce2c9bda27 100644
--- a/packages/core/src/components/nav/page-two.tsx
+++ b/packages/core/src/components/nav/page-two.tsx
@@ -21,7 +21,7 @@ export class PageTwo {
     nav.pop();
   }
 
-  render() {
+  protected render() {
     return [<ion-header>
       <ion-navbar>
         <ion-title>Page Two</ion-title>
diff --git a/packages/core/src/components/note/note.tsx b/packages/core/src/components/note/note.tsx
index 698210ec31..b234ea6937 100644
--- a/packages/core/src/components/note/note.tsx
+++ b/packages/core/src/components/note/note.tsx
@@ -40,7 +40,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Note {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/page/page.tsx b/packages/core/src/components/page/page.tsx
index 91890403b3..edee2c2553 100644
--- a/packages/core/src/components/page/page.tsx
+++ b/packages/core/src/components/page/page.tsx
@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Page {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 2936009f4e..23226d649d 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -266,7 +266,7 @@ export class Popover {
     }
   }
 
-  render() {
+  protected render() {
     const ThisComponent = this.component;
 
     const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');
diff --git a/packages/core/src/components/radio/radio-group.tsx b/packages/core/src/components/radio/radio-group.tsx
index 74295e266c..1e109ca624 100644
--- a/packages/core/src/components/radio/radio-group.tsx
+++ b/packages/core/src/components/radio/radio-group.tsx
@@ -177,7 +177,7 @@ export class RadioGroup {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index 57b70e1bf0..8cde280cf4 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -164,7 +164,7 @@ export class Radio {
     };
   }
 
-  render() {
+  protected render() {
     const radioClasses: CssClassMap = {
       'radio-icon': true,
       'radio-checked': this.checked
diff --git a/packages/core/src/components/range/range-knob.tsx b/packages/core/src/components/range/range-knob.tsx
index 52849f5ccf..fddb2f4e7a 100644
--- a/packages/core/src/components/range/range-knob.tsx
+++ b/packages/core/src/components/range/range-knob.tsx
@@ -57,7 +57,7 @@ export class RangeKnob {
     };
   }
 
-  render() {
+  protected render() {
     if (this.pin) {
       return [
         <div class='range-pin' role='presentation'>{this.val}</div>,
diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx
index 531b099617..260c84ae6c 100644
--- a/packages/core/src/components/range/range.tsx
+++ b/packages/core/src/components/range/range.tsx
@@ -329,7 +329,7 @@ export class Range implements BaseInputComponent {
     };
   }
 
-  render() {
+  protected render() {
     return [
       <slot name='range-start' />,
 
diff --git a/packages/core/src/components/reorder/reorder-group.tsx b/packages/core/src/components/reorder/reorder-group.tsx
index 36c20f83de..47da43c437 100644
--- a/packages/core/src/components/reorder/reorder-group.tsx
+++ b/packages/core/src/components/reorder/reorder-group.tsx
@@ -372,7 +372,7 @@ export class ReorderGroup {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <ion-gesture {...{
         disableScroll: true,
diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx
index 10d36ca1b1..bc2042ab99 100644
--- a/packages/core/src/components/reorder/reorder.tsx
+++ b/packages/core/src/components/reorder/reorder.tsx
@@ -12,7 +12,7 @@ export class ItemReorder {
     this.hasContent = this.ele.childElementCount > 0;
   }
 
-  render() {
+  protected render() {
     // TODO: https://github.com/ionic-team/stencil/issues/171
     if (this.hasContent === true) {
       return <slot></slot>;
diff --git a/packages/core/src/components/router/route-link.tsx b/packages/core/src/components/router/route-link.tsx
index 6b979690fd..5dcdc359fe 100644
--- a/packages/core/src/components/router/route-link.tsx
+++ b/packages/core/src/components/router/route-link.tsx
@@ -21,7 +21,7 @@ export class RouteLink {
     */
   }
 
-  render() {
+  protected render() {
     /*
     const router = document.querySelector(this.router);
     const match = router.match
diff --git a/packages/core/src/components/router/route.tsx b/packages/core/src/components/router/route.tsx
index 3306fd7188..4255e1c927 100644
--- a/packages/core/src/components/router/route.tsx
+++ b/packages/core/src/components/router/route.tsx
@@ -32,7 +32,7 @@ export class Route {
 */
   }
 
-  render() {
+  protected render() {
 /*
     this.match.url = this.routerInstance.routeMatch.url;
     const match = this.match
diff --git a/packages/core/src/components/router/router.tsx b/packages/core/src/components/router/router.tsx
index 6f62a3ff91..5331f5ebc9 100644
--- a/packages/core/src/components/router/router.tsx
+++ b/packages/core/src/components/router/router.tsx
@@ -55,7 +55,7 @@ export class Router {
     console.log('Hash change', e)
   }
 
-  render() {
+  protected render() {
     console.log('<ion-router> rendering')
     return (
       <slot></slot>
diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx
index 6591996e2d..c266a8cff2 100644
--- a/packages/core/src/components/scroll/scroll.tsx
+++ b/packages/core/src/components/scroll/scroll.tsx
@@ -341,7 +341,7 @@ export class Scroll {
     this.gesture = this.detail = this.detail.event = null;
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 
diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx
index 6e6020d7bc..bbe2f30789 100644
--- a/packages/core/src/components/searchbar/searchbar.tsx
+++ b/packages/core/src/components/searchbar/searchbar.tsx
@@ -349,7 +349,7 @@ export class Searchbar {
 
   // TODO remove the ion-buttons and replace with native buttons to remove
   // the button dependency
-  render() {
+  protected render() {
     return [
       <div class='searchbar-input-container'>
         <ion-button
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index 47390a6d1b..dcab421e53 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -105,7 +105,7 @@ export class SegmentButton {
     return classList;
   }
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
     const hostClasses = getElementClassObject(this.el.classList);
 
diff --git a/packages/core/src/components/segment/segment.tsx b/packages/core/src/components/segment/segment.tsx
index 0d9bb364b8..9b94b0c12f 100644
--- a/packages/core/src/components/segment/segment.tsx
+++ b/packages/core/src/components/segment/segment.tsx
@@ -134,7 +134,7 @@ export class Segment {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/select-option/select-option.tsx b/packages/core/src/components/select-option/select-option.tsx
index db90829211..aa7e574569 100644
--- a/packages/core/src/components/select-option/select-option.tsx
+++ b/packages/core/src/components/select-option/select-option.tsx
@@ -32,7 +32,7 @@ export class SelectOption {
     return this.el.textContent || '';
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 
diff --git a/packages/core/src/components/select/select-popover.tsx b/packages/core/src/components/select/select-popover.tsx
index 9ecc561f34..5f6f9f3c7d 100644
--- a/packages/core/src/components/select/select-popover.tsx
+++ b/packages/core/src/components/select/select-popover.tsx
@@ -50,7 +50,7 @@ export class SelectPopover {
     this.dismiss(value);
   }
 
-  render() {
+  protected render() {
     return (
       <ion-list no-lines={this.mode === 'md'}>
         <ion-radio-group value={this.value}>
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 6b0451e999..896e430f1d 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -369,7 +369,7 @@ export class Select {
     };
   }
 
-  render() {
+  protected render() {
     let addPlaceholderClass = false;
 
     // If selected text has been passed in, use that first
diff --git a/packages/core/src/components/skeleton-text/skeleton-text.tsx b/packages/core/src/components/skeleton-text/skeleton-text.tsx
index b86d9ffb21..cf4a45330d 100644
--- a/packages/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/packages/core/src/components/skeleton-text/skeleton-text.tsx
@@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core';
 export class SkeletonText {
   @Prop() width: string = '100%';
 
-  render() {
+  protected render() {
     return <span style={{width: this.width}}>&nbsp;</span>;
   }
 }
diff --git a/packages/core/src/components/slides/slide.tsx b/packages/core/src/components/slides/slide.tsx
index 5448a2f378..1e8bc10de0 100644
--- a/packages/core/src/components/slides/slide.tsx
+++ b/packages/core/src/components/slides/slide.tsx
@@ -28,7 +28,7 @@ export class Slide {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx
index 6f4bf6edc2..17b922cb6f 100644
--- a/packages/core/src/components/slides/slides.tsx
+++ b/packages/core/src/components/slides/slides.tsx
@@ -133,7 +133,7 @@ export class Slides {
   @Prop() keyboardControl: boolean;
 
 
-  render() {
+  protected render() {
     return (
       <div class='swiper-container' data-dir='rtl'>
         <div class='swiper-wrapper'>
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index 3e2877ceb4..f8e776cc32 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -167,7 +167,7 @@ export class Spinner {
     };
   }
 
-  render() {
+  protected render() {
     const name = this.getName();
 
     const spinner = SPINNERS[name] || SPINNERS['lines'];
diff --git a/packages/core/src/components/split-pane/split-pane.tsx b/packages/core/src/components/split-pane/split-pane.tsx
index f7629966aa..cf26b12a5a 100644
--- a/packages/core/src/components/split-pane/split-pane.tsx
+++ b/packages/core/src/components/split-pane/split-pane.tsx
@@ -265,7 +265,7 @@ export class SplitPane {
     };
   }
 
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 
diff --git a/packages/core/src/components/tabs/tab-bar.tsx b/packages/core/src/components/tabs/tab-bar.tsx
index 6c71e1f7f9..6fa3e7ce24 100644
--- a/packages/core/src/components/tabs/tab-bar.tsx
+++ b/packages/core/src/components/tabs/tab-bar.tsx
@@ -36,7 +36,7 @@ export class TabBar {
     this.onTabSelected && this.onTabSelected(tab, index);
   }
 
-  render() {
+  protected render() {
     return (
       <div class="tabbar" role="tablist">
         {this.tabs.map((tab, index) => {
diff --git a/packages/core/src/components/tabs/tab-button.tsx b/packages/core/src/components/tabs/tab-button.tsx
index f442ddc00e..8e7abea5fe 100644
--- a/packages/core/src/components/tabs/tab-button.tsx
+++ b/packages/core/src/components/tabs/tab-button.tsx
@@ -46,7 +46,7 @@ export class TabButton {
     };
   }
 
-  render() {
+  protected render() {
     if (!this.tab) {
       return null;
     }
diff --git a/packages/core/src/components/tabs/tab-highlight.tsx b/packages/core/src/components/tabs/tab-highlight.tsx
index dd18b50e7f..d327bc7bc9 100644
--- a/packages/core/src/components/tabs/tab-highlight.tsx
+++ b/packages/core/src/components/tabs/tab-highlight.tsx
@@ -5,7 +5,7 @@ import { Component } from '@stencil/core';
   tag: 'ion-tab-highlight'
 })
 export class TabHighlight {
-  render() {
+  protected render() {
     return (
       <div></div>
     );
diff --git a/packages/core/src/components/tabs/tab.tsx b/packages/core/src/components/tabs/tab.tsx
index ea782c7041..f2cd6b5461 100644
--- a/packages/core/src/components/tabs/tab.tsx
+++ b/packages/core/src/components/tabs/tab.tsx
@@ -94,7 +94,7 @@ export class Tab {
     this.ionTabDidLoad.emit({ tab: this });
   }
 
-  render() {
+  protected render() {
     const RootComponent = this.root;
     return [
       <RootComponent />,
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index 7bf8328129..c413972220 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -85,7 +85,7 @@ export class Tabs {
     this.ionChange && this.ionChange(tab);
   }
 
-  render() {
+  protected render() {
     return [
       <ion-tab-bar
         tabs={this.tabs}
diff --git a/packages/core/src/components/thumbnail/thumbnail.tsx b/packages/core/src/components/thumbnail/thumbnail.tsx
index 580247b8c5..52cd3e47c0 100644
--- a/packages/core/src/components/thumbnail/thumbnail.tsx
+++ b/packages/core/src/components/thumbnail/thumbnail.tsx
@@ -13,7 +13,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Thumbnail {
-  render() {
+  protected render() {
     return <slot></slot>;
   }
 }
diff --git a/packages/core/src/components/title/title.tsx b/packages/core/src/components/title/title.tsx
index 950f58ad04..75bcb62234 100644
--- a/packages/core/src/components/title/title.tsx
+++ b/packages/core/src/components/title/title.tsx
@@ -52,7 +52,7 @@ export class ToolbarTitle {
   mode: string;
   color: string;
 
-  render() {
+  protected render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'toolbar-title');
 
     return [
diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx
index 19c639dc3c..953d2ea3a0 100644
--- a/packages/core/src/components/toggle/toggle.tsx
+++ b/packages/core/src/components/toggle/toggle.tsx
@@ -149,7 +149,7 @@ export class Toggle implements BooleanInputComponent {
     };
   }
 
-  render() {
+  protected render() {
     return (
       <ion-gesture {...{
         'canStart': this.canStart.bind(this),
diff --git a/packages/core/src/components/toolbar/navbar.tsx b/packages/core/src/components/toolbar/navbar.tsx
index dc142f3f80..313556d3ae 100644
--- a/packages/core/src/components/toolbar/navbar.tsx
+++ b/packages/core/src/components/toolbar/navbar.tsx
@@ -78,7 +78,7 @@ export class Navbar {
     };
   }
 
-  render() {
+  protected render() {
     const backButtonIcon = this.backButtonIcon || this.config.get('backButtonText', 'Back');
     const backButtonText = this.backButtonText || this.config.get('backButtonIcon', 'Back');
 
diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx
index 8e3a10fa73..8260ce06b0 100644
--- a/packages/core/src/components/toolbar/toolbar.tsx
+++ b/packages/core/src/components/toolbar/toolbar.tsx
@@ -122,7 +122,7 @@ export class Toolbar {
     };
   }
 
-  render() {
+  protected render() {
     const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background');
     const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');