diff --git a/core/api.txt b/core/api.txt
index 745d82786af..760f8f1b89a 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -957,6 +957,8 @@ ion-item-divider,css-prop,--padding-start,ios
ion-item-divider,css-prop,--padding-start,md
ion-item-divider,css-prop,--padding-top,ios
ion-item-divider,css-prop,--padding-top,md
+ion-item-divider,part,content
+ion-item-divider,part,inner
ion-item-group,none
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index ac449ffa3ad..62cd9fabf8b 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -11,6 +11,9 @@ import type { Color } from '../../interface';
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
* @slot end - Content is placed to the right of the divider text in LTR, and to the left in RTL.
+ *
+ * @part inner - The inner container element that wraps the divider content.
+ * @part content - The wrapper element that contains the default slot.
*/
@Component({
tag: 'ion-item-divider',
@@ -50,8 +53,8 @@ export class ItemDivider implements ComponentInterface {
})}
>
-
-
+
+
diff --git a/core/src/components/item-divider/test/custom/item-divider.e2e.ts b/core/src/components/item-divider/test/custom/item-divider.e2e.ts
new file mode 100644
index 00000000000..af20ef88dc8
--- /dev/null
+++ b/core/src/components/item-divider/test/custom/item-divider.e2e.ts
@@ -0,0 +1,57 @@
+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('item-divider: custom'), () => {
+ test.describe(title('CSS shadow parts'), () => {
+ test('should be able to customize inner part', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
Divider
+ `,
+ config
+ );
+
+ const divider = page.locator('ion-item-divider');
+ const backgroundColor = await divider.evaluate((el) => {
+ const shadowRoot = el.shadowRoot;
+ const inner = shadowRoot?.querySelector('.item-divider-inner');
+ return inner ? window.getComputedStyle(inner).backgroundColor : '';
+ });
+ expect(backgroundColor).toBe('rgb(255, 0, 0)');
+ });
+
+ test('should be able to customize content part', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
Divider
+ `,
+ config
+ );
+
+ const divider = page.locator('ion-item-divider');
+ const backgroundColor = await divider.evaluate((el) => {
+ const shadowRoot = el.shadowRoot;
+ const content = shadowRoot?.querySelector('.item-divider-wrapper');
+ return content ? window.getComputedStyle(content).backgroundColor : '';
+ });
+ expect(backgroundColor).toBe('rgb(0, 128, 0)');
+ });
+ });
+ });
+});