feat:Self assign shadow dom part attribute / Override HTML Template of default ionic components

[savsani]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Feature required: Self assignment of part attributes & HTML Template Override for default ionic components

Why ? Consider this problem for an example:

I'm using ion-datetime & ion-datetime-button in my form. I'm using title slot like this

Choose Appointment Date

It includes whole div with class datetime-header. No any CSS Shadow part for this.

(1) How can i change font-size or hide this div class datetime-selected-date using CSS.

I tried in global.scss with !important but its not working.

There are many div classes in ionic where shadow part needs to be exposed, so in CSS we can easily target it.

(2) How can i manually assign css shadow part attribute myself in ionic?

I tried editing this file: node_modules/@ionic/core/components/ion-datetime.js

return (h("div", { class: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), showExpandedHeader && h("div", { class: "datetime-selected-date", part: "demotest" }, this.getHeaderSelectedDateText())));

This assigns a part "demotest" when i rebuild ionic prod. Not working on ionic serve.

I don't think this tricky method is a good solution as my changes will be erased on updates.

(3) Is there any standard recommended way to modify/extend/override default ionic components html template? So we can self customise it with required part attributes and css classes customization.

Describe the Use Case

If we can self assign part attribute/Override HTML template, we can easily target any div class using CSS even in shadow dom for better customisation of an app. Currently we can't target all div classes in a shadow dom and for each div class part attribute isn't exposed by ionic.

Describe Preferred Solution

Solution-1: Either expose part attributes on all div classes in all default ionic components which uses shadow dom.

Solution-2: Provide some methods to override default HTML template of default ionic components.

Solution-3: Provide some methods to self-assign part attributes to any div class.

Describe Alternatives

(1) Manually editing node_modules/@ionic/core/components/component.js for html override & part attributes assignment.

(2) I can also assign part on ngafterview like this trick:

ngAfterViewInit() {
setTimeout(() => {
const datetimeEl = document.querySelector('ion-datetime');
if (datetimeEl) {
const shadowRoot = (datetimeEl as any).shadowRoot;
if (shadowRoot) {
const selectedDateEl = shadowRoot.querySelector(
'.datetime-selected-date'
) as HTMLElement;
if (selectedDateEl) {
selectedDateEl.setAttribute('part', 'demotest');
}
}
}
}, 0);
}

Related Code

No response

Additional Information

No response