Common incorrect uses of <mds-card-header>. 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-card-header> Outside <mds-card>

<mds-card-header> is a compound child; it must be a direct child of <mds-card>. Using it standalone renders nothing useful - the host card’s slot plumbing drives all layout.

<!-- INCORRECT -->
<mds-card-header>
  <mds-text typography="h5">Titolo</mds-text>
</mds-card-header>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Titolo</mds-text>
  </mds-card-header>
</mds-card>

Do Not Set slot="header" Manually on <mds-card-header>

The component sets its own slot="header" in its render() host binding. Adding the attribute again on the element in the light DOM is redundant: the component writes it itself, overwriting any other value when it renders.

<!-- INCORRECT -->
<mds-card>
  <mds-card-header slot="header">
    <mds-text typography="h5">Titolo</mds-text>
  </mds-card-header>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Titolo</mds-text>
  </mds-card-header>
</mds-card>

Do Not Put Action Controls in the Default Slot

<mds-button> and other action controls belong in the action named slot, not in the default slot. Placing them in the default slot breaks the layout - no actions wrapper groups them, and the header spreads every default-slot child along the row (justify-content: space-between), so the controls land wherever the number of siblings puts them rather than together at the far end.

<!-- INCORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Rapporto annuale</mds-text>
    <mds-button label="Modifica" variant="primary"></mds-button>
  </mds-card-header>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Rapporto annuale</mds-text>
    <mds-button slot="action" label="Modifica" variant="primary" tone="outline"></mds-button>
  </mds-card-header>
</mds-card>

Do Not Use a Raw <div> as the Card Header Instead of <mds-card-header>

Using a plain <div slot="header"> bypasses the component’s conditional action wrapper, its shadow layout, and the parent’s compound-child detection. The component also ensures correct alignment and spacing between title and actions.

<!-- INCORRECT -->
<mds-card>
  <div slot="header">
    <h5>Riepilogo ordini</h5>
    <button>Modifica</button>
  </div>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Riepilogo ordini</mds-text>
    <mds-button slot="action" label="Modifica" variant="primary" tone="outline"></mds-button>
  </mds-card-header>
</mds-card>

Do Not Invent a Custom slot Name on Children of <mds-card-header>

<mds-card-header> exposes exactly two slots: the default (unnamed) slot and action. Assigning any other slot name silently discards the element.

<!-- INCORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Dashboard</mds-text>
    <mds-button slot="actions" label="Aggiungi" variant="primary"></mds-button>
  </mds-card-header>
</mds-card>

<!-- CORRECT -->
<mds-card>
  <mds-card-header>
    <mds-text typography="h5">Dashboard</mds-text>
    <mds-button slot="action" label="Aggiungi" variant="primary" tone="strong"></mds-button>
  </mds-card-header>
</mds-card>