Common incorrect uses of <mds-table-footer>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use mds-table-footer Outside mds-table

mds-table-footer is a compound child and must be a direct slot child of mds-table. Using it outside its parent breaks the internal layout communication and produces unstyled, structurally invalid output.

<!-- INCORRECT -->
<div class="table-wrapper">
  <mds-table-footer>
    <mds-table-cell>Totale</mds-table-cell>
  </mds-table-footer>
</div>

<!-- CORRECT -->
<mds-table>
  <mds-table-body><!-- ... --></mds-table-body>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="action">Totale</mds-text></mds-table-cell>
  </mds-table-footer>
</mds-table>

Do Not Put Raw Text or <td> Elements in the Footer Slot

The default slot of mds-table-footer accepts mds-table-cell elements. Raw text, <td>, or arbitrary HTML bypasses the shared border and padding tokens and yields a visually broken footer.

<!-- INCORRECT -->
<mds-table-footer>
  <td>Cognome e nome</td>
  <td>Email</td>
</mds-table-footer>

<!-- CORRECT -->
<mds-table-footer>
  <mds-table-cell><mds-text typography="action">Cognome e nome</mds-text></mds-table-cell>
  <mds-table-cell><mds-text typography="action">Email</mds-text></mds-table-cell>
</mds-table-footer>

Do Not Replace mds-table-footer with a <tfoot> Element

Using the native <tfoot> inside mds-table bypasses the shared CSS token cascade, border transition, and reduced-motion handling that mds-table-footer wires up. Always use the Magma component.

<!-- INCORRECT -->
<mds-table>
  <mds-table-body><!-- ... --></mds-table-body>
  <tfoot>
    <tr><td>Totale</td><td>4.700,00 EUR</td></tr>
  </tfoot>
</mds-table>

<!-- CORRECT -->
<mds-table>
  <mds-table-body><!-- ... --></mds-table-body>
  <mds-table-footer>
    <mds-table-cell><mds-text typography="action">Totale</mds-text></mds-table-cell>
    <mds-table-cell><mds-text typography="action">4.700,00 EUR</mds-text></mds-table-cell>
  </mds-table-footer>
</mds-table>

Do Not Style the Footer by Piercing Shadow DOM

mds-table-footer has no documented --mds-table-footer-* custom properties. Styling changes (background, border color, cell spacing) must go through the --mds-table-* custom properties on the parent mds-table. Targeting internals via >>> or undocumented selectors will break on future releases.

/* INCORRECT */
mds-table-footer >>> :host {
  background: rgb(var(--magma-surface-raised));
}

/* CORRECT */
mds-table {
  --mds-table-background: rgb(var(--magma-surface-raised));
  --mds-table-border-color: rgb(var(--magma-border-default));
}

Do Not Use mds-table-footer as the Only Section of a Table

mds-table-footer provides summary or totals context and is meaningful only when accompanied by mds-table-body (and usually mds-table-header). A footer-only table has no data for the summary to refer to.

<!-- INCORRECT -->
<mds-table>
  <mds-table-footer>
    <mds-table-cell>Nessun dato disponibile</mds-table-cell>
  </mds-table-footer>
</mds-table>

<!-- CORRECT: use mds-zero for empty states, or include mds-table-body -->
<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Voce"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell><mds-text typography="detail">Nessun record</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>