feat(card): convert card-content to shadow DOM

Author: brandyscarney

core/api.txt

@@ -179,7 +179,7 @@ ion-alert,css-prop,--width,ionic
 ion-alert,css-prop,--width,ios
 ion-alert,css-prop,--width,md
 
-ion-app,none
+ion-app,shadow
 ion-app,prop,mode,"ios" | "md",undefined,false,false
 ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
@@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
 
-ion-card-content,none
+ion-card-content,shadow
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 

core/src/components/card-content/card-content.common.scss

@@ -1,6 +1,6 @@
 // Card Content
 // --------------------------------------------------
 
-ion-card-content {
+:host {
   position: relative;
 }

core/src/components/card-content/card-content.ionic.scss

@@ -4,7 +4,7 @@
 // Ionic Card Content
 // --------------------------------------------------
 
-.card-content-ionic {
+:host {
   @include globals.padding(globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 
@@ -18,7 +18,3 @@
     @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
   }
 }
-
-ion-card-header + .card-content-ionic {
-  padding-top: 0;
-}

core/src/components/card-content/card-content.ios.scss

@@ -4,7 +4,7 @@
 // iOS Card Header
 // --------------------------------------------------
 
-.card-content-ios {
+:host {
   @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
 
   font-size: $card-ios-font-size;
@@ -41,7 +41,3 @@
     font-size: dynamic-font(14px);
   }
 }
-
-ion-card-header + .card-content-ios {
-  padding-top: 0;
-}

core/src/components/card-content/card-content.md.scss

@@ -4,7 +4,7 @@
 // Material Design Card Content
 // --------------------------------------------------
 
-.card-content-md {
+:host {
   @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
 
   font-size: $card-md-font-size;
@@ -44,7 +44,3 @@
     line-height: 1.5;
   }
 }
-
-ion-card-header + .card-content-md {
-  padding-top: 0;
-}

core/src/components/card-content/card-content.native.scss

@@ -4,6 +4,6 @@
 // Card Content
 // --------------------------------------------------
 
-ion-card-content {
+:host {
   display: block;
 }

core/src/components/card-content/card-content.tsx

@@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global';
     md: 'card-content.md.scss',
     ionic: 'card-content.ionic.scss',
   },
+  shadow: true,
 })
 export class CardContent implements ComponentInterface {
   render() {
@@ -22,11 +23,10 @@ export class CardContent implements ComponentInterface {
       <Host
         class={{
           [theme]: true,
-
-          // Used internally for styling
-          [`card-content-${theme}`]: true,
         }}
-      ></Host>
+      >
+        <slot></slot>
+      </Host>
     );
   }
 }

core/src/css/core.scss

@@ -424,3 +424,7 @@ h1[tabindex="-1"]:focus,
     overflow: hidden;
   }
 }
+
+ion-card-header + ion-card-content {
+  padding-top: 0;
+}