How to style ion-button -> button:before element in Ionic4

Ionic Framework
1

I am migrating an Ionic3 app to Ionic4 and I am having a hard time translating some of the CSS rules there.

For example, in Ionic3 I could style the :before or :after or an <button ion-button> element with button[ion-button]:before.

Now the <button> element is inside the Shadow DOM of <ion-button> and I am not able to put an :before inside the <button>. Is this possible with Ionic4 ?

2

Without hack I would say no. There are different tutorials available on the net, notably those from Josh Morony https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/ about what you could and what you could not style in case of shadow Dom. I also wrote one article about this particular topic https://medium.com/stencil-tricks/a-practical-introduction-to-styling-a-shadow-dom-and-slots-879565a2f423

That being you could still build a hack and inject styles using javascript or better, build your own component for your button if they need to be heavy styled

3

I see! I think I will follow your advice and make my own component.

1 Like
4

Good call, when I migrated I tried for hours to style the ion-button, like a crazy thing full round radius 50% with gradient two level of z-index and stuffs, after a while I just created my own component and it hits me “damned I should have done that earlier, that’s way to much customization, make no sense these are way to different” :wink:

have fun