diff --git a/core/src/components/hide-when/hide-when.scss b/core/src/components/hide-when/hide-when.scss
index 61dd22c0a3..680be5e3d9 100644
--- a/core/src/components/hide-when/hide-when.scss
+++ b/core/src/components/hide-when/hide-when.scss
@@ -1,8 +1,7 @@
-ion-hide-when.show-content {
+:host {
   display: block;
 }
 
-ion-hide-when.hide-content {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
+:host(.hide-content) {
+  display: none;
 }
diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx
index 13a2116dd8..8b02240f3b 100644
--- a/core/src/components/hide-when/hide-when.tsx
+++ b/core/src/components/hide-when/hide-when.tsx
@@ -5,7 +5,8 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-hide-when',
-  styleUrl: './hide-when.scss'
+  styleUrl: './hide-when.scss',
+  shadow: true
 })
 export class HideWhen implements ComponentInterface, DisplayWhen {
 
@@ -61,9 +62,12 @@ export class HideWhen implements ComponentInterface, DisplayWhen {
   hostData() {
     return {
       class: {
-        'show-content': !this.passesTest,
         'hide-content': this.passesTest
       }
     };
   }
+
+  render() {
+    return <slot></slot>;
+  }
 }
diff --git a/core/src/components/hide-when/test/basic/index.html b/core/src/components/hide-when/test/basic/index.html
index 6a33db42f4..46568eb623 100644
--- a/core/src/components/hide-when/test/basic/index.html
+++ b/core/src/components/hide-when/test/basic/index.html
@@ -21,15 +21,15 @@
     <ion-content padding>
 
       <h2>Mode Tests</h2>
-      <ion-hide-when mode="md, ios">
+      <ion-hide-when modes="md, ios">
         <div>Hides on MD, iOS</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="md">
+      <ion-hide-when modes="md">
         <div>Hides on MD only</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="ios">
+      <ion-hide-when modes="ios">
         <div>Hides on iOS only</div>
       </ion-hide-when>
 
diff --git a/core/src/components/hide-when/test/preview/index.html b/core/src/components/hide-when/test/preview/index.html
index f5408e06fe..83ee66f4ac 100644
--- a/core/src/components/hide-when/test/preview/index.html
+++ b/core/src/components/hide-when/test/preview/index.html
@@ -21,15 +21,15 @@
     <ion-content padding fullscreen>
 
       <h2>Mode Tests</h2>
-      <ion-hide-when mode="md, ios">
+      <ion-hide-when modes="md, ios">
         <div>Hides on MD, iOS</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="md">
+      <ion-hide-when modes="md">
         <div>Hides on MD only</div>
       </ion-hide-when>
 
-      <ion-hide-when mode="ios">
+      <ion-hide-when modes="ios">
         <div>Hides on iOS only</div>
       </ion-hide-when>
 
diff --git a/core/src/components/hide-when/usage/javascript.md b/core/src/components/hide-when/usage/javascript.md
index 74d676cb2a..bc6a2f9afc 100644
--- a/core/src/components/hide-when/usage/javascript.md
+++ b/core/src/components/hide-when/usage/javascript.md
@@ -2,15 +2,15 @@
 <ion-content padding>
 
   <h2>Mode Tests</h2>
-  <ion-hide-when mode="md, ios">
+  <ion-hide-when modes="md, ios">
     <div>Hides on MD, iOS</div>
   </ion-hide-when>
 
-  <ion-hide-when mode="md">
+  <ion-hide-when modes="md">
     <div>Hides on MD only</div>
   </ion-hide-when>
 
-  <ion-hide-when mode="ios">
+  <ion-hide-when modes="ios">
     <div>Hides on iOS only</div>
   </ion-hide-when>
 
diff --git a/core/src/components/show-when/show-when.scss b/core/src/components/show-when/show-when.scss
index 72a0e6dd2a..b1fd2396e8 100644
--- a/core/src/components/show-when/show-when.scss
+++ b/core/src/components/show-when/show-when.scss
@@ -1,8 +1,7 @@
-ion-show-when.show-content {
-  display: block;
+:host {
+  display: none;
 }
 
-ion-show-when.hide-content {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
+:host(.show-content) {
+  display: block;
 }
diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx
index a783e8ff23..1aad1be67f 100644
--- a/core/src/components/show-when/show-when.tsx
+++ b/core/src/components/show-when/show-when.tsx
@@ -5,7 +5,8 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-show-when',
-  styleUrl: 'show-when.scss'
+  styleUrl: 'show-when.scss',
+  shadow: true
 })
 export class ShowWhen implements ComponentInterface, DisplayWhen {
 
@@ -63,9 +64,11 @@ export class ShowWhen implements ComponentInterface, DisplayWhen {
     return {
       class: {
         'show-content': this.passesTest,
-        'hide-content': !this.passesTest
       }
     };
   }
 
+  render() {
+    return <slot></slot>;
+  }
 }
diff --git a/core/src/components/show-when/test/basic/index.html b/core/src/components/show-when/test/basic/index.html
index 657c725b62..570efb578f 100644
--- a/core/src/components/show-when/test/basic/index.html
+++ b/core/src/components/show-when/test/basic/index.html
@@ -21,15 +21,15 @@
     <ion-content padding>
 
       <h2>Mode Tests</h2>
-      <ion-show-when mode="md, ios">
+      <ion-show-when modes="md, ios">
         <div>Shows on MD, iOS</div>
       </ion-show-when>
 
-      <ion-show-when mode="md">
+      <ion-show-when modes="md">
         <div>Shows on MD only</div>
       </ion-show-when>
 
-      <ion-show-when mode="ios">
+      <ion-show-when modes="ios">
         <div>Shows on iOS only</div>
       </ion-show-when>
 
diff --git a/core/src/components/show-when/test/preview/index.html b/core/src/components/show-when/test/preview/index.html
index 937a965137..e95e6a0ce8 100644
--- a/core/src/components/show-when/test/preview/index.html
+++ b/core/src/components/show-when/test/preview/index.html
@@ -21,15 +21,15 @@
     <ion-content padding fullscreen>
 
       <h2>Mode Tests</h2>
-      <ion-show-when mode="md, ios">
+      <ion-show-when modes="md, ios">
         <div>Shows on MD, iOS</div>
       </ion-show-when>
 
-      <ion-show-when mode="md">
+      <ion-show-when modes="md">
         <div>Shows on MD only</div>
       </ion-show-when>
 
-      <ion-show-when mode="ios">
+      <ion-show-when modes="ios">
         <div>Shows on iOS only</div>
       </ion-show-when>