<!DOCTYPE html>
<html>
<head>
  <title>alerts-page-sk</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>alerts-page-sk</h1>
  <!-- the element will appear here. -->

  <h2>Events</h2>
  <pre id=events></pre>

  <error-toast-sk> </error-toast-sk>
  <script type="text/javascript" charset="utf-8">
    // Insert the element later, which should given enough time for fetchMock to be in place.
    customElements.whenDefined('alerts-page-sk').then(() => {
      document.querySelector('h1').insertAdjacentElement('afterend', document.createElement('alerts-page-sk'));

      document.querySelector('alerts-page-sk').addEventListener('some-event-name', (e) => {
        document.querySelector('#events').textContent = JSON.stringify(e.detail, null, '  ');
      });

    });
  </script>
</body>
</html>