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.
 
 <h4 id="version-9x-chip">Chip</h4>
 
@@ -41,6 +43,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 <h5>Example 1: Swap two columns</h5>
 
 **Version up to 8.x**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -50,7 +53,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   </ion-row>
 </ion-grid>
 ```
+
 **Version 9.x+**
+
 ```html
 <ion-grid>
   <ion-row>
@@ -62,9 +67,11 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ```
 
 <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>
@@ -73,7 +80,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>
@@ -82,7 +91,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>
@@ -95,7 +106,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>
@@ -110,6 +123,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>
@@ -122,7 +136,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>
@@ -134,4 +150,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,40 @@
 // 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);
+::slotted(h1) {
+  @include margin(0, 0, 2px);
 
-    font-size: dynamic-font(16px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(24px);
+  font-weight: normal;
+}
 
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include margin(2px, 0);
+::slotted(h2) {
+  @include margin(2px, 0);
 
-    font-size: dynamic-font(14px);
-    font-weight: normal;
-  }
+  font-size: dynamic-font(16px);
+  font-weight: normal;
+}
 
-  p {
-    @include margin(0, 0, 2px);
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+  @include margin(2px, 0);
 
-    font-size: dynamic-font(14px);
-  }
+  font-size: dynamic-font(14px);
+  font-weight: normal;
 }
 
-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,43 @@
 // 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;
-  }
+::slotted(h1) {
+  @include margin(0, 0, 2px);
 
-  h2 {
-    @include margin(2px, 0);
+  font-size: dynamic-font(24px);
+  font-weight: normal;
+}
 
-    font-size: dynamic-font(16px);
-    font-weight: normal;
-  }
+::slotted(h2) {
+  @include margin(2px, 0);
 
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include margin(2px, 0);
+  font-size: dynamic-font(16px);
+  font-weight: normal;
+}
 
-    font-size: dynamic-font(14px);
-    font-weight: normal;
-  }
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+  @include margin(2px, 0);
 
-  p {
-    @include margin(0, 0, 2px);
+  font-size: dynamic-font(14px);
+  font-weight: normal;
+}
 
-    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/components/card/test/basic/index.html

@@ -34,6 +34,23 @@
             in the woods. Wash your spirit clean.
           </ion-card-content>
         </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+            <p>This is a paragraph</p>
+          </ion-card-content>
+        </ion-card>
       </ion-content>
     </ion-app>
   </body>

core/src/css/core.scss

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