Ionic 4: How to overwrite style in Shadow elements

Question

I have to style a small app built with Ionic 4

The HTML is:

<div class="searchbar-wrapper">
  <ion-searchbar></ion-searchbar>
</div>
<div class="content-wrapper" #scrollingBlock>
  Content
</div>

I need to get rid of the shadow that Ionic by default adds to lots of its elements. I can see in Chrome devtools the searchbar like this:

    .searchbar-input.sc-ion-searchbar-md {

       ...
       -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }

In theory I just need to set the box-shadow and the webkit-box-shadow equal to none. However, I can not even overwrite the box-shadow because it is in a Shadow element and there is not variable that control the shadow. Something like --box-shadow.

The question:

How could I “kill” styles coming from Ionic that are not govern by a variable and are in shadow-elements?

Answer 1

ion-searchbar as some other elements expose a method to access underlying "input" element - getInputElement. That should allow you to add styles if needed. Below is how you can do that with Ionic 4.11.5:

Template remains the same, but in ts file you could do:

import { IonSearchbar } from '@ionic/angular';
///
export class MySearchPage {

    @ViewChild(IonSearchbar, { static: false }) searchbar: IonSearchbar;
    ///
    ngAfterViewInit() {
        this.searchbar.getInputElement().then((searchbarInputElement)=>{
      searchbarInputElement.style.boxShadow = "none";
        // in case you need to style its parent as well:
        //searchbarInputElement.parentElement.style.boxShadow = "none";
    })
  };

}

Let me know if this helps.