Notification toast disappears sooner than setTimout

[VictoriaStefanikova]

Hi! I have replaced notification message component in my code with notification toast.
Solution with notification-message scale component

<div *ngFor="let notification of notifications">
  <scale-notification-message
    variant="{{ notification.variant }}"
    dismissible
    opened
  >
    {{ notification.message }}
  </scale-notification-message>
</div>

Solution with notification-toast scale component

<div *ngFor="let notification of notifications">
  <scale-notification-toast variant="{{ notification.variant }}" opened animated>
    <p slot="header">{{ notification.message }}</p>
  </scale-notification-toast>
</div>

I also have a functionality in the ts file where I set timeout for each notification for 5 seconds:

private addNotification(notification: Notification): void {
    this.notifications.push(notification);
    setTimeout(() => {
      this.closeNotification(notification);
    }, 5000);
  }

I see problem with notification-toast:
1. Whenever there is an action in the application that triggers showing notification-toast, it appears for just a split second - it only flashes on the screen, although the component is visible for 5 seconds when inspecting through developer tools.
2. I think nice feature for notification toast would be having autoHideDuration attribute as exist for notification message already

[verdody]

I want to raise an issue that is related to the problem mentioned above.
I have defined the notification-toast component like this:

<div *ngFor="let notification of notifications">
  <scale-notification-toast variant="{{ notification.variant }}" opened animated>
    <p slot="header">{{ notification.message }}</p>
  </scale-notification-toast>
</div>

If I have multiple notification toasts, I want them to stack below each other, not on top of each other.
Currently, they are always placed on top of each other. I found out, that this is because of the class in the shadow DOM, that defines:

.notification-toast {
...
position: fixed;
...
}

To solve my issue, I would need to change it to position: relative. However I cannot target it like this:
scale-notification-toast::part(base) I need to target the class. Can you please suggest me how can I achieve this?
Or is there any other way how to set this behavior?

Thank you.

[marvinLaubenstein]

Hi @verdody, we'll take a look 🙂