ionic-team / ionic-team/ionic-framework

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

オープン
#30,680 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
triage
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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_

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。