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.
Thanks dear @victorsosa
I too had similar issue. Please check this link for additional info
