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, })} > -
+
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( + ` + + + 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)'); + }); + }); + }); +});