Change style of ionic v4 components


I would like to change the little down arrow of the select component but according to this article it can’t be done because it’s inside the Shadow DOM.

Also, there is one issue I will like to fix by modifying the styles. When the “no-padding” is applied to the “ion-select” element, the arrow is cut in half.

Are there any workarounds?


Probably not what you want to hear because you want to solve your issue right now, but opening an issue and submitting a PR with a new CSS4 variables which allows you to achieve your goal (= which allow you to style the nested dom element) is maybe the way…


I think what I wrote seems like a demand? I know I could send a request but I have seen some similar requests. For example, to add a variable to control the opacity of the backdrop of the popmodal (since 2016). Adding a variable for the backdrop opacity seems a more reasonable change than adding a variable for a specific element of one component that maybe nobody care (except the designer I work with).

I might need to create my own component to achieve what I want. I haven’t used ionic since v1 and still learning about the changes.


If you know then…or a workaround like this maybe [ionic-v4] shadow-dom