date-time.html

<!doctype html>
<html lang="en-US" style="height: 100%">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="sig-nal date-time demo" />
    <title>sig-nal | date-time demo</title>
    <script type="module" src="./dist/index.js"></script>
  </head>
  <body>
    <digital-clock>
      <template shadowrootmode="open">
        <style>
          * {
            font-family: system-ui;
            font-weight: 700;
            font-size: 26px;
          }

          table {
            background: #555;
            color: #fff;
            padding: 0 5px;
            border-radius: 5px;
          }

          td {
            min-width: 36px;
          }

          .year {
            min-width: 72px;
          }

          .weekday:after {
            content: ',';
          }
          .day:after {
            content: '.';
          }
          .hour:after,
          .minute:after {
            content: ':';
            margin-right: -2px;
          }
        </style>
        <table>
          <tr>
            <td id="datetime0" class="weekday">Freitag</td>
            <td id="datetime2" class="day">10</td>
            <td id="datetime4" class="month">October</td>
            <td id="datetime6" class="year">2025</td>
            <td id="datetime8" class="hour">22</td>
            <td id="datetime10" class="minute">15</td>
            <td id="datetime12">15</td>
            <td id="datetime14">MESZ</td>
          </tr>
        </table>
        <!-- prettier-ignore -->
        <sig-nal new="datetime" for="previousElementSibling" hydrate>
          {"": {"@init": ({signal}) => setInterval(() => (signal.value = Intl.DateTimeFormat('de-CH', { dateStyle: 'full', timeStyle: 'long'}).formatToParts(Date.now()).map(({value}) => ({textContent: value}))), 1000),
                ".firstElementChild": renderWith(object, false)
               }
          }
        </sig-nal>
      </template>
    </digital-clock>
  </body>
</html>