Loading https://toast-message.github.io/element.js
injects a <toast-message> container tag at
the
end
of the document
(no need to add it yourself)
The Web Component listens at document
level for a "toast-message"
Event
The Event details
Object takes a message [String]
and optional
delay
[Integer-milliseconds]
example:
document.dispatchEvent(new CustomEvent("toast-message", { message:"I am toast", delay:1000 } ))
There is also a matching global function showToastMessage( message, delay )
for ease of use
And a .show(message,delay)
method on the <toast-message> Web Component
Toasts can be styled with --toast-message-background
and --toast-message-color
CSS
properties, and
::part(toast)