Customizing internal CSS in Ionic v4

#1

How to customize CSS of components in Ionic v4?

We have some not-so-common requirements in Ionic v3 apps, which we would like to upgrade to v4 someday soon. Like making a tab icon blink in some cases (to alert user to check something urgent that has showed up on that tab). Customizing list-view and list-item’s label/icon for the margins and borders. Making the entire background of tabs/pages transparent to see-through whatever is underneath (and also let the clicks pass-though). Customizing sliders to ‘start’ from the middle instead of from the left. Changing text size/color/alignment for some alerts, action-sheets. etc…

I think the recommended way now is to use the API variables instead of customizing/overwriting internal CSS of Ionic components but that is unlikely to ever cover ‘all’ the possible cases. There are way too many cases for how every app would want to customize the look and feel. Its good to have these API variables to cover more and more of the common cases over time, making it much easier and blissful to use Ionic. But that definitely can’t be the only way - I don’t think Ionic team will ever be able to cover all such cases. And maybe they shouldn’t, not every customization that a designer/customer asks for will be a good idea - some of them are terrible ideas - but they need to be implemented anyway and probably shouldn’t become a part of standard Ionic API/features.

So while using API variables should be preferred wherever possible, how can the CSS of components be customized for rest of the cases? Any pointer to standard documentation about this will help.

Why the hell styling is so complicated in V4?
#2

This thread seems to be discussing something similar, no solutions there yet:
I came with a problem in Ionic4 project:cloudn't overwrite ionic component'css