Basic Toast

<!--
  The live region is part of the page shell, not the toast. It ships empty and
  stays mounted; JS appends the toast INTO it. A role="status" element that is
  inserted already-populated is usually not announced at all - screen readers
  watch mounted regions for mutations.

  role="status" is polite on purpose: a toast interrupting someone mid-sentence
  to say "Saved" is a bug, not a feature.
-->
<div class="toast-region" role="status" aria-live="polite"></div>

<template id="toast-template">
  <div class="toast">
    <svg class="toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
    </svg>
    <div class="toast__body">
      <p class="toast__title"></p>
      <p class="toast__message"></p>
    </div>
    <button class="toast__close" type="button" aria-label="Dismiss">
      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path d="M6.3 6.3a1 1 0 0 1 1.4 0L10 8.6l2.3-2.3a1 1 0 1 1 1.4 1.4L11.4 10l2.3 2.3a1 1 0 0 1-1.4 1.4L10 11.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L8.6 10 6.3 7.7a1 1 0 0 1 0-1.4Z" />
      </svg>
    </button>
  </div>
</template>

<script>
  const region = document.querySelector('.toast-region');
  const template = document.querySelector('#toast-template');

  function showToast(title, message, duration = 5000) {
    const toast = template.content.firstElementChild.cloneNode(true);
    toast.querySelector('.toast__title').textContent = title;
    toast.querySelector('.toast__message').textContent = message;

    const remove = () => toast.remove();
    toast.querySelector('.toast__close').addEventListener('click', remove);

    // Appending into the already-mounted region is what triggers the
    // announcement.
    region.append(toast);
    setTimeout(remove, duration);
  }
</script>