Style shadow elements in Ionic 4


#1

I am trying to apply some particular styles to an ion-item. The shadow-root that gets created for ion-item includes several divs that have overflow: hidden as part of their styles. I need to make these overflow: visible.

I can’t seem to select these through CSS in any way. I have tried /deep/ ion-item .item-native, ion-item ::slotted(div) and all kinds of other combinations based on what I’ve ready. I’ve also tried using overflow: visible !important, but it doesn’t seem to matter – the shadow dom elements themselves can’t be updated, and I don’t seem to have a way to update the styles. I can select ion-item itself and apply styles, but overflow is set to hidden for the shadow element divs. I need to override this.

Is there a way that this can be done?