Let's take this article about toaster and this article about custom elements and merge them together to create a new article about toast notification as custom elements.

I recently published pop-notify a custom element that is framework agnostic, fully accessible and html friendly. You can use it with any framework. It works great with bootstrap's toasts. You can use its default styles if you want. Or you can go on and make your own thing.

Here is the playground

And here is the repository

Did I mention it's html friendly ? If you use something like htmx, this might just be a great way to send toast notification along with the html over the wire. Any notification will reassign itself to the toast container and be nicely displayed in a popover container (if your browser supports it, otherwise it's going to be a good old fixed div with a z-index).

I hope you have fun with it :-)