How to edit "item-inner" class in item-native div in ionic v4?

Question

I have to remove the extra padding being adding up in .item-inner class inside .item-native. https://ibb.co/vs4BWWp

<div class="item-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>

Answer 1

ion-item{
    --inner-padding-end: 0px;
    --padding-start:0px
}

This works, because since ionic 4 web components & shadow DOM were introduced to keep "essential CSS" isolated.

In a lot of cases it just works to put -- in front of the wanted CSS attribute to change it or in other words: just define a CSS variable with the same name as the attribute you want to change.

Does someone know a complete reference to ionic's shadow DOM or something like that?

Further information:
Shadow DOM in Ionic (and Why it’s Awesome), CSS Shadow Parts,
CSS variables, Web Components

Answer 2

.item-native .item-inner{padding:0}. this will remove padding of that element