Common incorrect uses of <mds-table-body>. 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-body> Outside <mds-table>

<mds-table-body> is a compound child and relies on the parent table for display: table-row-group context and for receiving the interactive / selection flags. Used standalone, layout and state wiring both break.

<!-- INCORRECT -->
<mds-table-body>
  <mds-table-row>
    <mds-table-cell>Mario Rossi</mds-table-cell>
  </mds-table-row>
</mds-table-body>

<!-- CORRECT -->
<mds-table>
  <mds-table-header>
    <mds-table-header-cell label="Nome"></mds-table-header-cell>
  </mds-table-header>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell>Mario Rossi</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Do Not Put Raw <tr> / <td> Inside <mds-table-body>

The component’s slot accepts only <mds-table-row> elements. Raw <tr> elements are not styled by the design-system tokens, do not receive hover or selection state, and skip accessibility roles.

<!-- INCORRECT -->
<mds-table>
  <mds-table-body>
    <tr>
      <td>Laura Bianchi</td>
      <td>Operatore</td>
    </tr>
  </mds-table-body>
</mds-table>

<!-- CORRECT -->
<mds-table>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell>Laura Bianchi</mds-table-cell>
      <mds-table-cell>Operatore</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Do Not Set interactive or selection Directly on the Body

Both flags are managed by the parent <mds-table>. Setting them by hand on <mds-table-body> will be overwritten the next time the table propagates its own state - and it creates a mismatch between the body state and the individual row states, which are also wired by the table.

<!-- INCORRECT -->
<mds-table>
  <mds-table-body interactive selection>
    <mds-table-row>
      <mds-table-cell>Giulia Verdi</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

<!-- CORRECT -->
<mds-table interactive selectable>
  <mds-table-body>
    <mds-table-row>
      <mds-table-cell>Giulia Verdi</mds-table-cell>
    </mds-table-row>
  </mds-table-body>
</mds-table>

Do Not Set Boolean Props as Strings

Stencil reads the exact string "false" as false, but interactive="false" and selection="false" leave the attribute on the element, and the body styles its hover and selection states on the attribute (:host([interactive]:hover), :host([selection])), so they still apply. Remove the attribute to turn it off; never assign the string "false".

<!-- INCORRECT -->
<mds-table-body interactive="false" selection="false">
  ...
</mds-table-body>

<!-- CORRECT (attribute absent = prop is undefined / false) -->
<mds-table-body>
  ...
</mds-table-body>

Do Not Customize via Undocumented Internal Selectors

The supported customization surface is the five --mds-table-body-* CSS custom properties. Piercing the shadow DOM or targeting undocumented internal classes couples your code to the implementation and breaks on minor releases.

/* INCORRECT */
mds-table-body >>> tr {
  background: lightyellow;
}

/* CORRECT */
mds-table-body {
  --mds-table-body-background: rgb(var(--magma-surface-muted));
  --mds-table-body-background-hover: rgb(var(--magma-accent-surface));
}