Ion-button shadow DOM - ionic 6.11.1

Ionic Framework
1

Hello guys, for some reason I see this CSS modification (see below) in my browser but not in the android emulator.

.btn-success::part(native) {
border-left: 4px solid #7fc128;
border-right: 4px solid #7fc128;
}

Inspecting the DOM in Chrome, it shows up. Inspecting the DOM on mobile (through chrome://inspect) doesn’t show the border modifications at all.

Is this a bug? If so, can it be fixed or is it me?

Thank you!

2

Where are you deploying your app to? What OS, what chrome version (get the user agent).

3

Thanks for the willingness to look into this, @mhartington.

As to your questions…

  • Chrome version → Version 89.0.4389.90 (Official Build) (x86_64)

  • This is how I deploy it onto an android emulator → ionic cordova run android --target="Nexus_5X_API_25" --livereload

  • This is the HTML part:
    <ion-button matRipple
    [disabled]="!ansForm.valid"
    type=“submit”
    shape=“round”
    size=“medium”
    color=“dark”
    class=“submit-btn btn-success”
    >Next Step

  • Android emulator version → 7.1.1

Thanks

4

You’re targeting an old version version of chrome on android, which doesn’t support css shadow parts. Not a bug in Ionic.

5

@mhartington That makes sense.

Was going to write a button of my own anyways :D. It’d take 5 mins.

Thank you!