Shadow dom parts not working with Child combinator

Issue

.html

<ion-select
          mode="md"
          formControlName="sortBy"
          interface="popover"
          legacy="true"
          class="my-class"
            >
          <ion-select-option value="1">Newest</ion-select-option>

          <ion-select-option value="5">Price (High to Low)</ion-select-option>
        </ion-select>

.css

.my-class>ion-select::part(icon) {
    display: none !important;
}

Can you tell me why the above is not working? But this works:

ion-select::part(icon) {
        display: none !important;
    }

I need to add the my-class dynamically here. That is why I need this.

Solution

You are using the > selector, by which you are saying that ion-select needs to be a direct child of .my-class. This is not the case, looking at the HTML structure

Please use ion-select.my-class::part(icon)

Answered By - Niels van Rijn