ion-item border inside custom component

Question

I have the markup as shown below.

<ion-item-group>
   <ion-item>First</ion-item>
   <ion-item>Second</ion-item>
   <ion-item>Third</ion-item>
</ion-item-group>

<ion-item-group>
    <custom-component></custom-component>
    <custom-component></custom-component>
</ion-item-group>

#Custom component markup#
<ion-item>Test<ion-item>

The problem is that for the ion-item inside my custom component, the standard bottom border is not drawn. Because in the dom they are inside the custom-component. How can I return the bottom border?

https://stackblitz.com/edit/ionic-7a3ai5?file=app%2Fapp.module.ts. See home component for example

Answer 1

Seems like the problem are these style rules:

ion-item-group .item-md .item-wrapper:last-child .item-inner, 
ion-item-group .item-md:last-child .item-inner {
  border: 0;
}

ion-item-group .item-ios:last-child .item-inner, 
ion-item-group .item-wrapper:last-child .item-ios .item-inner {
    border: 0;
}

And they're being applied because each custom-component includes only one item, so each item is the last child of its parent.

One way to solve it would be to manually apply the Ionic default border to each item within your custom component (except the item in the last custom-component, just like Ionic does).

Working demo

custom-component {

  /* ------- */  
  /* Android */
  /* ------- */

  /* Add the border to each item */
  .item-md.item-block .item-inner,
  ion-item-group .item-md .item-wrapper:last-child .item-inner, 
  ion-item-group .item-md:last-child .item-inner {
    border-bottom: 1px solid #dedede;
  }

  /* Remove the border from the last custom component item */
  &:last-child {
    .item-md .item-wrapper:last-child .item-inner, 
    .item-md:last-child .item-inner {
        border: 0;
    }
  }

  /* --- */
  /* iOS */
  /* --- */

  /* Add the border to each item */
  .item-ios.item-block .item-inner,
  ion-item-group .item-ios:last-child .item-inner, 
  ion-item-group .item-wrapper:last-child .item-ios .item-inner {
    border-bottom: .55px solid #c8c7cc;
  }

  /* Remove the border from the last custom component item */
  &:last-child {
    .item-ios:last-child .item-inner, 
    .item-wrapper:last-child .item-ios .item-inner {
        border: 0;
    }
  }
}