Editing CSS shadow part of an ionic select text (color) without affecting other instance of ion select

I am trying to edit the color of inside text of an ion select when i pick an option, but once i edit the shadow part in the component, the rest of the ion selects (in other components) are taking this change. I just want to encapsulate this color change, but i can not without editing the shadow part and affecting the rest as they have different colors.
I have tried to put them in different css files but i doesnt work of course.
Example, i have an ion select in a component with this css

ion-select::part(text){
    font-weight: 900;
    color: white;
}

but it gets overwritten with the css of another component that i edit

ion-select::part(text){
    font-weight: 900;
    color: #c00000;
}

Any help with CSS shadow parts it’s appreciate it

4 posts - 2 participants

Read full topic