Style custom components and their slotted elements

Ionic Framework
1

I’m migrating my app from Ionic V3 to V4. Almost done, except… I’m having a hard time with styling. For example, I migrated my html to something like this, using slots :

  <ion-list>
	<ion-item class="list-item" *ngFor="let a of v">
	  <ion-avatar slot="start">
	    <img class="mainImg" [src]="a.image ? a.image : globals.userImage">
	    <img class="candle" [src]="'assets/imgs/home/candle.png'">
	  </ion-avatar>
	  <h3 class="item-title">{{a.first_name}} {{a.last_name}}</h3>
	  <p class="item-description">
	    In X days
	    <span>
	      {{a.day}} {{a.monthName}}
	    </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>

The CSS I had for it, before upgrading :

  ion-list.list {
    margin-bottom: 0;

    div.list-item.item-block {
      background-color: #343B43;
      margin: 0;
      border-bottom: 1px solid #dedede;
      position: relative;

      ion-avatar {
        position: relative;

        img.mainImg {
          width: 60px;
          height: 60px;
        }

        img.candle {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 20%;
          height: auto;
          border-radius: initial;
        }
      }

      div.item-inner {
        border: 0;
        margin: 0;

        h3 {
          color: white;
          font-weight: 600;
          text-transform: uppercase;
        }

        p.item-description {
          color: white;
          font-size: 13px;

          span {
            font-size: 12px;
            color: #9D9992;
          }
        }

        div.badgeHolder {
          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;
          }
        }

        span.iconHolder {
          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;
        }
      }
    }
  }

So, of course some changes are no-brainers, like div.list-item.item-block simply becoming ion-item or background-color: #343B43; being able to be converted to --background thanks to css4 variables. But there are a lot of things I don’t find a way to migrate easily… Also, I would really like to bypass the headache to have and rethink each and every line of our css code according to css4 variables available in Ionic doc - it has been written by different people and it would take me too much time.

For the previous example, here is how the shadow dom looks like :

<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>

And because the item-inner is displayed in horizontal flex, my h3, p, div appears one after the other - which is not what is intended, of course…

So, do I have a simple solution to apply my styles to slotted elements inside ionic components’ shadow dom?

2

In Ionic 4, the components have css custom properties.

There are variables sass that we can custom, for example: In ionic-button, we can change the background color with property:

ion-button {
–background: #000000;
}

3

Well, yes, that’s part of my question, and I even spoke about the same example you did :slight_smile: