Inline Notification Banner

<!--
  Not an alert. This is the "3 new items arrived while you were reading" banner
  - pushed by a subscription, not by page state - so it keeps a notification's
  anatomy (live region, dismiss, an action that consumes the event) while
  sitting in the document flow instead of an overlay.

  It reserves its slot with min-height even when empty. A banner that appears
  from nothing shoves the list down under the reader's cursor; reserving the
  space costs 44px of blank and buys a stable page.
-->
<div class="banner-slot" role="status" aria-live="polite"></div>

<template id="banner-template">
  <div class="banner">
    <svg class="banner__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 2a5 5 0 0 0-5 5v3.6l-1.3 2.6A1 1 0 0 0 4.6 15h10.8a1 1 0 0 0 .9-1.8L15 10.6V7a5 5 0 0 0-5-5Zm0 16a2.5 2.5 0 0 0 2.5-2.5h-5A2.5 2.5 0 0 0 10 18Z" />
    </svg>
    <p class="banner__text"></p>
    <button class="banner__cta" type="button">Show them</button>
    <button class="banner__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 slot = document.querySelector('.banner-slot');
  const template = document.querySelector('#banner-template');

  function announce(count) {
    slot.replaceChildren();
    const banner = template.content.firstElementChild.cloneNode(true);
    banner.querySelector('.banner__text').textContent =
      count + (count === 1 ? ' new update' : ' new updates');
    banner.querySelector('.banner__close').addEventListener('click', () => slot.replaceChildren());
    slot.append(banner);
  }
</script>