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

BREAKING.md

@@ -28,7 +28,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 <h4 id="version-9x-card">Card</h4>
 
-- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+- **ion-card**: The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+
+- **ion-card-content**: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements.
 
 <h4 id="version-9x-chip">Chip</h4>
 
@@ -47,6 +49,7 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
 <h5>Example 1: Swap two columns</h5>
 
 **Version up to 8.x**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -56,7 +59,9 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -68,9 +73,11 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
 ```
 
 <h5>Example 2: Reorder columns with specific sizes</h5>
+
 To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
 
 **Version up to 8.x**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -79,7 +86,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -88,7 +97,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 <h5>Example 3: Push</h5>
+
 ```html
 <ion-grid>
   <ion-row>
@@ -101,7 +112,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -116,6 +129,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 ```
 
 <h5>Example 4: Push and Pull</h5>
+
 ```html
 <ion-grid>
   <ion-row>
@@ -128,7 +142,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -140,4 +156,4 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
+```

core/api.txt

@@ -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);
 
@@ -13,12 +13,8 @@
   flex-direction: column;
 
   gap: globals.$ion-space-400;
-
-  img {
-    @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
-  }
 }
 
-ion-card-header + .card-content-ionic {
-  padding-top: 0;
+::slotted(img) {
+  @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
 }

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

@@ -4,44 +4,16 @@
 // 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;
 
   line-height: 1.4;
-
-  h1 {
-    @include margin(0, 0, 2px);
-
-    font-size: dynamic-font(24px);
-    font-weight: normal;
-  }
-
-  h2 {
-    @include margin(2px, 0);
-
-    font-size: dynamic-font(16px);
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include margin(2px, 0);
-
-    font-size: dynamic-font(14px);
-    font-weight: normal;
-  }
-
-  p {
-    @include margin(0, 0, 2px);
-
-    font-size: dynamic-font(14px);
-  }
 }
 
-ion-card-header + .card-content-ios {
-  padding-top: 0;
+::slotted(p) {
+  @include margin(0, 0, 2px);
+
+  font-size: dynamic-font(14px);
 }

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

@@ -4,47 +4,19 @@
 // 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;
 
   line-height: $card-md-line-height;
+}
 
-  h1 {
-    @include margin(0, 0, 2px);
-
-    font-size: dynamic-font(24px);
-    font-weight: normal;
-  }
-
-  h2 {
-    @include margin(2px, 0);
-
-    font-size: dynamic-font(16px);
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include margin(2px, 0);
-
-    font-size: dynamic-font(14px);
-    font-weight: normal;
-  }
-
-  p {
-    @include margin(0, 0, 2px);
-
-    font-size: dynamic-font(14px);
-    font-weight: normal;
+::slotted(p) {
+  @include margin(0, 0, 2px);
 
-    line-height: 1.5;
-  }
-}
+  font-size: dynamic-font(14px);
+  font-weight: normal;
 
-ion-card-header + .card-content-md {
-  padding-top: 0;
+  line-height: 1.5;
 }

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

@@ -242,6 +242,10 @@ ion-card-header.ion-color .ion-inherit-color {
   color: inherit;
 }
 
+ion-card-header + ion-card-content {
+  padding-top: 0;
+}
+
 // Menu Styles
 // --------------------------------------------------
 

core/src/css/ionic/core.ionic.scss

@@ -238,6 +238,10 @@ ion-card-header.ion-color .ion-inherit-color {
   color: inherit;
 }
 
+ion-card-header + ion-card-content {
+  padding-top: 0;
+}
+
 // Menu Styles
 // --------------------------------------------------