<toast-message>

GitHub

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)




GZIP Analysis