StencilJS Notification Component

Question

I'm trying to build a notification toast component. The idea is to have a parent component notification, which is used for

• positioning on the viewport, and
• to spawn notification-instance child components using a push method on the consumer of the notification component.

notification-instance is the actual notification toast. It is responsible for

• dismissing itself after set duration, and
• handling click events.

When the initial call to push is executed, an instance of notification-instance is shown on the viewport. My issue is that any consecutive calls to push (e.g. after 3 seconds) doesn't do anything. However, the render function within notification is run.

Any ideas what I might be doing wrong or missing? 🤔

notification component

@State()
private notificationInstance;

@Method()
public push(message: string, type: NotificationType = NotificationType.None, options?: NotificationOptions): void {
    this.notificationInstance = this.createNotificationInstance(message, type, options);
}

render(): JSX.Element {
    return (
        <Host class={this.position}>
            { this.notificationInstance }
        </Host>
    );
}

createNotificationInstance(message: string, type: NotificationType, {dismissAfterDuration, dismissOnClick, showProgressBar, pauseOnFocusLoss, pauseOnHover}: NotificationOptions): JSX.Element {
    return <mi-notification-instance
        message={message}
        notificationType={type}
        dismissAfterDuration={dismissAfterDuration}
        dismissOnClick={dismissOnClick}
        showProgressBar={showProgressBar}
        pauseOnFocusLoss={pauseOnFocusLoss}
        pauseOnHover={pauseOnHover}>
    </mi-notification-instance>;
}

notification-instance

@Listen('click', { capture: true })
handleClick(): void {
    if (this.dismissOnClick) {
        this.dismiss();
    }
}

render(): JSX.Element {
    const miNotificationInstanceMarkup = (
        <Host>
            <div class="notification progress">
                {this.notificationType && this.notificationType !== 'none' ? this.renderIcon(this.notificationType) : null}
                <p class="notification__message">{ this.message }</p>
            </div>
        </Host>
    );

    return miNotificationInstanceMarkup;
}

dismiss(): void {
    this.hostElement.remove();
}