[ionic 4] How can I style (custom css) ion-item

In ionic4, generates #shadow-root as shown in the image below:

To assign custom css to ion-item element, I need to style the child elements under #shadow-root. Plz tell me how can I point to the elements with “item-native” class and “item-inner” class?

I tried following but “item-native” is not getting styled:

.list-item.item-native {
// custom css
.list-item .item-native {
// custom css

Can someone plz help me…

Hi pantarmj,

Based on what I have searched, we are not allowed to change css of the web component unless a variable is used to define its css.

Let me know if you found any workaround for this too.

You can just only set the variable of the component like this:

ion-item {
–background: var(–ion-color-primary) !important;

to set the background to that color.

1 Like

Thanks dear @victorsosa

I too had similar issue. Please check this link for additional info