Svelte printable page component with running header and footer

+page.svelte

<script lang="ts">
  import PrintablePage from '$lib/components/printable-page.svelte'
</script>

<PrintablePage>
  {#snippet footer()}
    <footer>footer</footer>
  {/snippet}
  
  {#snippet header()}
    <header>header</header>
  {/snippet}
  
  <div>content</div>
</PrintablePage>

printable-page.svelte

<script lang='ts'>
  // From: https://stackoverflow.com/a/51371081

  import type { Snippet } from 'svelte'

  const {
    children,
    header,
    footer,
  }: {
    children?: Snippet
    header?: Snippet
    footer?: Snippet
  } = $props()
</script>

<table class='report-container'>
  <thead class='report-header'>
    <tr>
      <th class='report-header-cell'>
        <div class='header-info'>
          {@render header?.()}
        </div>
      </th>
    </tr>
  </thead>
  <tfoot class='report-footer'>
    <tr>
      <td class='report-footer-cell'>
        <div class='footer-info'>
          {@render footer?.()}
        </div>
      </td>
    </tr>
  </tfoot>
  <tbody class='report-content'>
    <tr>
      <td class='report-content-cell'>
        {@render children?.()}
      </td>
    </tr>
  </tbody>
</table>

<style>
  :global {
    @page {
      margin: 1in;
    }
  }
  table.report-container {
    page-break-after: always;
  }
  thead.report-header {
    display: table-header-group;
  }
  tfoot.report-footer {
    display: table-footer-group;
  }
</style>