Ionic change causes css to stop working - any way to modify shadow dom to fix it?

Ionic Framework
1

I have an app built originally with Ionic 6, but has very recently been upgraded to Ionic 7. I have a number of select boxes that I have styled with the text displayed to the left and the arrow to the right.

Screenshot 2023-12-12 at 22.20.01
Screenshot 2023-12-12 at 22.20.01830×150 4.25 KB

This was fine until I just the other day when I upgraded to Ionic 7.6.0 and suddenly the arrow was being shown directly after the text despite my css formatting which had previously worked fine.

Screenshot 2023-12-12 at 23.27.01
Screenshot 2023-12-12 at 23.27.01828×124 4.13 KB

Some research indicated this to be caused by a change to Ionic two weeks ago where slots were added to, among other things, ion-select (feat(input, textarea, select): add start and end slots by amandaejohnston · Pull Request #28583 · ionic-team/ionic-framework · GitHub). The change added a new div with a class called select-wrapper-inner which I can no longer modify (don’t now how to) to fill the entire space available.

Screenshot 2023-12-12 at 22.20.48
Screenshot 2023-12-12 at 22.20.48918×814 154 KB

I was previously using this css in my .page.scss file to expand the container part, but this no longer works.

.value-child-select {
  flex: 1;
  display: flex;
  ...
 
  &::part(container) {
    width: 100%;
  }
}

This new div was unfortunately implemented without a part attribute which would have made this an easy situation to fix. I could have overridden that part element as well.

Does anyone know if it possible to add css to my code that will modify the shadow dom for select-wrapper-inner class? If I do this and manually set the width to 100% in developer tools in the browser, I get the desired effect. Unfortunately, I don’t know if it’s possible in my local css code or the global.scss file. Any suggestions?

1 Like
2

I tried a whole bunch of things with no success too. I wonder if this was an unattended consequence of the new feature adding the start/end slots :thinking:

A possible workaround/hack is to set label-placement="stacked". With that, it causes the arrow to go to the right.

Hopefully someone from the Ionic team can chime in.

1 Like
3

Thanks for the tip! While this is a sort of hacky workaround, it does indeed solve the issue I have. I don’t use the label attribute so it is empty but setting the label-placement does add a width: calc(…) attribute to the select-wrapper-inner class and that causes the arrow to be moved to the right.

Great job! I’ll mark this as a solution.

I’d still like to hear an opinion from the Ionic team though if any of them read this.

1 Like
4

I was just looking at some of my saved code snippets and came across this snippet on how to access the Shadow DOM via JS. In this example we are editing an IonModal. I don’t recall if it worked or not as I am not currently using it (maybe found a better solution for what I was trying to do).

this.modal.shadowRoot
    ?.querySelector('slot')
    ?.assignedElements()
    .find(element => element.classList.contains('ion-page'))
    ?.classList.remove('ion-page')