I have a few articles and videos that help explain the purpose of Ionic’s usage of Shadow DOM for some of their components, and how we can work with this approach to style components the way we want. If the concept of a Shadow DOM or using CSS Variables/Custom Properties to style Ionic component’s is new to you, you might want to do a bit of additional reading before tackling this article:
Both of these tutorials were created before Ionic supported using Shadow Parts. With the added support for Shadow Parts, this will allow us to more easily pierce the veil of a Shadow DOM to inject our own custom styles, without having to resort to hacky methods like injecting CSS into components which mostly defeats the purpose of using Shadow DOM in the first place.
To help explain the role of Shadow Parts, I am publishing a free snippet from my Creating Ionic Applications with Angular book below. This is just one small part of the approximately 853 page book that contains a wealth of information about understanding and using Angular to build Ionic applications.