From f653e6bcd538a570b73095bef2d004b40f8e9c1f Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 19 Jan 2026 16:47:24 -0500
Subject: [PATCH 1/2] feat(list-header): add inner part

---
 core/api.txt                                    | 1 +
 core/src/components/list-header/list-header.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/api.txt b/core/api.txt
index 745d82786af..c52a4824b4d 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1018,6 +1018,7 @@ ion-list-header,css-prop,--color,ios
 ion-list-header,css-prop,--color,md
 ion-list-header,css-prop,--inner-border-width,ios
 ion-list-header,css-prop,--inner-border-width,md
+ion-list-header,part,inner
 
 ion-loading,scoped
 ion-loading,prop,animated,boolean,true,false,false
diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
index 8fb939c1277..bc59e6f0e40 100644
--- a/core/src/components/list-header/list-header.tsx
+++ b/core/src/components/list-header/list-header.tsx
@@ -7,6 +7,8 @@ import type { Color } from '../../interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part inner - The inner container element that wraps the list header content.
  */
 @Component({
   tag: 'ion-list-header',
@@ -40,7 +42,7 @@ export class ListHeader implements ComponentInterface {
           [`list-header-lines-${lines}`]: lines !== undefined,
         })}
       >
-        <div class="list-header-inner">
+        <div class="list-header-inner" part="inner">
           <slot></slot>
         </div>
       </Host>

From e53dc7e4f4536d09e06677522948783e4e0ee83d Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 20 Jan 2026 10:14:15 -0500
Subject: [PATCH 2/2] test(list-header): add e2e test for css shadow parts

---
 .../test/custom/list-header.e2e.ts            | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 core/src/components/list-header/test/custom/list-header.e2e.ts

diff --git a/core/src/components/list-header/test/custom/list-header.e2e.ts b/core/src/components/list-header/test/custom/list-header.e2e.ts
new file mode 100644
index 00000000000..ddac2e4bd24
--- /dev/null
+++ b/core/src/components/list-header/test/custom/list-header.e2e.ts
@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('list-header: custom'), () => {
+    test.describe(title('CSS shadow parts'), () => {
+      test('should be able to customize inner part', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            ion-list-header::part(inner) {
+              background-color: red;
+            }
+          </style>
+
+          <ion-list-header>Header</ion-list-header>
+        `,
+          config
+        );
+
+        const header = page.locator('ion-list-header');
+        const backgroundColor = await header.evaluate((el) => {
+          const shadowRoot = el.shadowRoot;
+          const inner = shadowRoot?.querySelector('.list-header-inner');
+          return inner ? window.getComputedStyle(inner).backgroundColor : '';
+        });
+        expect(backgroundColor).toBe('rgb(255, 0, 0)');
+      });
+    });
+  });
+});