Mengatur Gaya Komponen Kustom dan Elemen Slotnya

Mengatur Gaya Komponen Kustom dan Elemen Slotnya

Saya sedang memigrasikan aplikasi dari Ionic V3 ke V4. Hampir selesai, namun ada kesulitan dalam styling. Contohnya, HTML yang telah dimigrasikan menggunakan slot seperti berikut:

<ion-list> <ion-item class="list-item" *ngFor="let a of v"> <ion-avatar slot="start"> <img class="mainImg" [src]="a ? a : globalsage"> <img class="candle" [src]="'assets/imgs/home/candle'"> </ion-avatar> <h3 class="item-title">{{a_name}} {{a_name}}</h3> <p class="item-description"> In X days <span> {{a}} {{aame}} </span> </p> <div class="badgeHolder" (click)="gotoSpecialPage()"><ion-badge slot="end">special page</ion-badge></div> <span slot="end" class="iconHolder" (click)="gotoNormalPage()"><ion-icon name="arrow-dropright"></ion-icon></span> </ion-item> </ion-list>

CSS yang digunakan sebelumnya adalah:

ion-list { margin-bottom: 0; list-item-block { background-color: #343B43; margin: 0; border-bottom: 1px solid #dedede; position: relative; ion-avatar { position: relative; imgg { width: 60px; height: 60px; } img { position: absolute; right: 0; bottom: 0; width: 20%; height: auto; border-radius: initial; } } div-inner { border: 0; margin: 0; h3 { color: white; font-weight: 600; text-transform: uppercase; } p-description { color: white; font-size: 13px; span { font-size: 12px; color: #9D9992; } } divolder { text-align: right; margin-right: 28px; ion-badge { background-color: #907027; padding: 7px 10px; border-radius: 12px; font-size: 11px; font-weight: 300; letter-spacing: 1px; } } spanlder { background-color: #2B3036; position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 13px; color: #907027; font-size: 36px; } } } }

Tentu saja beberapa perubahan mudah, seperti list-item-block menjadi ion-item atau background-color: #343B43; dapat diubah menjadi --background berkat variabel CSS4. Namun banyak hal yang sulit untuk dimigrasikan. Berikut struktur shadow DOM untuk contoh tersebut:

<div class="item-native"> <slot name="start"></slot> <div class="item-inner"> <div class="input-wrapper" style=""> <slot style=""> <!--h3, p, div are here--> </slot> </div> <slot name="end"></slot> <div class="item-inner-highlight"></div> </div></div>

Karena item-inner ditampilkan secara horizontal flex, h3, p, div muncul satu demi satu, yang bukan merupakan tata letak yang diinginkan. Apakah ada solusi sederhana untuk menerapkan gaya ke elemen slot di dalam shadow DOM komponen Ionic?

Tanggapan: Di Ionic 4, komponen memiliki properti kustom CSS. Contohnya pada ion-button, kita dapat mengubah warna latar belakang dengan properti --background seperti ion-button { --background: #000000; }.