Ion-button shadow DOM - ionic 6.11.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!

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

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
    class=“submit-btn btn-success”
    >Next Step

  • Android emulator version → 7.1.1


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

@mhartington That makes sense.

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

Thank you!