Initializing toasts in bootstrap-4 was as easy as: $('.toast').toast(option);
Now as bootstrap-5 dropped jquery support, the require a different initialization approach:
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
});
But there is hardly any documentation about it.
Means: what is option here? And what should we do with the resulting toastList?
toastlist will just hold the elements which are now initialized as Toasts (which you probably already know), I don't know if there's any use of it.
In the SASS version, just doing a new Toast(el) initializes all the toasts, however the way you mention is how it is done in the CDN version.
option should be the options array you can pass onto the constructor, though I was not able to do it that way. However passing in data-bs-* attributes in the trigger element itself worked.
You can still just call the toastEl.show() where toastEl is the toast element itself. All the other methods and events work as well.
Given the new-ness of B5, hopefully the documentation will improve overtime.