From 53a795d759c36c194f7aeda01801edfeb4ba055a Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 28 Oct 2025 15:13:29 -0400
Subject: [PATCH] feat(card): convert card-content to shadow DOM

---
 core/api.txt                                              | 4 ++--
 core/src/components/card-content/card-content.common.scss | 2 +-
 core/src/components/card-content/card-content.ionic.scss  | 6 +-----
 core/src/components/card-content/card-content.ios.scss    | 6 +-----
 core/src/components/card-content/card-content.md.scss     | 6 +-----
 core/src/components/card-content/card-content.native.scss | 2 +-
 core/src/components/card-content/card-content.tsx         | 8 ++++----
 core/src/css/core.scss                                    | 4 ++++
 8 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index e4597ef593..e5b8c73931 100644
--- a/core/api.txt
+++ b/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
 
diff --git a/core/src/components/card-content/card-content.common.scss b/core/src/components/card-content/card-content.common.scss
index 499a6b5a87..81bf1f7269 100644
--- a/core/src/components/card-content/card-content.common.scss
+++ b/core/src/components/card-content/card-content.common.scss
@@ -1,6 +1,6 @@
 // Card Content
 // --------------------------------------------------
 
-ion-card-content {
+:host {
   position: relative;
 }
diff --git a/core/src/components/card-content/card-content.ionic.scss b/core/src/components/card-content/card-content.ionic.scss
index 83504d47a1..4e91504ec9 100644
--- a/core/src/components/card-content/card-content.ionic.scss
+++ b/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;
-}
diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss
index 0b772b9d45..d8cafc28c1 100644
--- a/core/src/components/card-content/card-content.ios.scss
+++ b/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;
-}
diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss
index ed780fb8e4..2de1cae70c 100644
--- a/core/src/components/card-content/card-content.md.scss
+++ b/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;
-}
diff --git a/core/src/components/card-content/card-content.native.scss b/core/src/components/card-content/card-content.native.scss
index 4bb2efe89d..8db97f01fd 100644
--- a/core/src/components/card-content/card-content.native.scss
+++ b/core/src/components/card-content/card-content.native.scss
@@ -4,6 +4,6 @@
 // Card Content
 // --------------------------------------------------
 
-ion-card-content {
+:host {
   display: block;
 }
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
index e39bead08a..56e8acb3b1 100644
--- a/core/src/components/card-content/card-content.tsx
+++ b/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>
     );
   }
 }
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 3d7a727592..328598d703 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -424,3 +424,7 @@ h1[tabindex="-1"]:focus,
     overflow: hidden;
   }
 }
+
+ion-card-header + ion-card-content {
+  padding-top: 0;
+}