Style custom components and their slotted elements

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-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'">
	  <h3 class="item-title">{{a.first_name}} {{a.last_name}}</h3>
	  <p class="item-description">
	    In X days
	      {{}} {{a.monthName}}
	  <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>

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 name="end"></slot>
    <div class="item-inner-highlight"></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?

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;

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