How to target toast-content in Ionic Toast

Ionic Framework
2

The only way is via JavaScript since it’s using the Shadow DOM and no part is assigned to that element. Here is an example (using Vue).

<ion-toast
  ref="myToast"
  trigger="open-toast"
  message="This toast will disappear after 5 seconds"
  :duration="5000"
  @ionToastWillPresent="applyStyles"
></ion-toast>

const myToast = ref(null);

function applyStyles() {
  const container =
    myToast.value.$el.shadowRoot?.querySelector('.toast-content');

  if (container) {
    container.style.padding = '5px';
  }
}
1 Like