Search code examples
htmlcssionic-framework

Ionic selecting element inside shadow-parts

I need to set padding-inline-end to 0px of the element:

<div class="item-inner">

Which is inside an element OF the shadow-parts.I cant find a way to do it with CSS.

#shadow-root

<div class="item-native" part="native">
   <slot name="start"></slot>
   <div class="item-inner">
      <div class="input-wrapper"><slot></slot></div>
      <slot name="end"></slot>
      <div class="item-inner-highlight"></div>
   </div>
   <div class="item-highlight"></div>
</div>
<div class="item-bottom"><slot name="error"></slot><slot name="helper"></slot></div>

I can access the shadow-parts with this:

ion-item::part(native) {
    //
}

But i cant find a way to access the element .item-inner which is inside the one above.

This does not work:

ion-item::part(native) .item-inner{
    padding-inline-end: 0px;  
}
Solution

  • Ionic provides css properties to target the shadow dom for the ion-item component. https://ionicframework.com/docs/api/item#css-custom-properties-1

    the prop you are looking for is --inner-padding-end.