Common incorrect uses of <mds-table-cell>. 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-cell> Outside Its Parent Hierarchy

<mds-table-cell> is a compound child; it must be placed inside <mds-table-row> or <mds-table-footer> (themselves inside <mds-table>). Rendering it standalone breaks the table layout and ARIA semantics entirely.

<!-- INCORRECT -->
<div class="my-grid">
  <mds-table-cell>Nome</mds-table-cell>
  <mds-table-cell>Email</mds-table-cell>
</div>

<!-- CORRECT -->
<mds-table>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell><mds-text typography="detail">Nome</mds-text></mds-table-cell>
      <mds-table-cell><mds-text typography="detail">Email</mds-text></mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Do Not Use <td> in Place of <mds-table-cell>

Using raw <td> inside <mds-table-row> bypasses Magma theming, the selected/sorted state styles, and the sort-value integration. Always use <mds-table-cell>.

<!-- INCORRECT -->
<mds-table-row>
  <td>Mario Rossi</td>
  <td>mario.rossi@esempio.it</td>
</mds-table-row>

<!-- CORRECT -->
<mds-table-row>
  <mds-table-cell><mds-text typography="detail">Mario Rossi</mds-text></mds-table-cell>
  <mds-table-cell><mds-text typography="detail">mario.rossi@esempio.it</mds-text></mds-table-cell>
</mds-table-row>

Do Not Skip value When Displaying Formatted Data in a Sortable Column

If a cell shows a formatted value (localized date, currency, percentage) and the column is sortable, omitting value causes the sort to compare the human-readable strings lexicographically, producing wrong order.

<!-- INCORRECT: "12 marzo 2024" sorts before "2 gennaio 2024" lexicographically -->
<mds-table-cell>
  <mds-text typography="detail">12 marzo 2024</mds-text>
</mds-table-cell>

<!-- CORRECT: ISO date in value drives sort; display string is for humans -->
<mds-table-cell value="2024-03-12">
  <mds-text typography="detail">12 marzo 2024</mds-text>
</mds-table-cell>

Do Not Style Cells by Piercing Shadow DOM

<mds-table-cell> does not expose named ::part() targets; the documented customization surface is --mds-table-cell-background, --mds-table-cell-background-alt, --mds-table-cell-color, and --mds-table-cell-color-alt. Targeting internals via >>> or undocumented selectors couples your code to implementation details that can change.

/* INCORRECT */
mds-table-cell >>> span {
  color: red;
}

/* CORRECT */
mds-table-cell {
  --mds-table-cell-color: rgb(var(--magma-danger-fg));
}

Do Not Wrap <mds-table-cell> in Extra Structural Elements

Inserting a <div> or <span> wrapper around <mds-table-cell> inside <mds-table-row> breaks the display: table-cell layout model and disrupts the column alignment.

<!-- INCORRECT -->
<mds-table-row>
  <div class="cell-wrapper">
    <mds-table-cell><mds-text typography="detail">Cognome</mds-text></mds-table-cell>
  </div>
</mds-table-row>

<!-- CORRECT -->
<mds-table-row>
  <mds-table-cell><mds-text typography="detail">Cognome</mds-text></mds-table-cell>
</mds-table-row>