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

<mds-price-table-features> is a compound child; it belongs inside a <mds-price-table> parent, which stacks it with the plan header or cards it compares. Standalone it still renders its table, but it is cut off from the plans its columns refer to.

<!-- INCORRECT -->
<mds-price-table-features label="Funzioni di base">
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
  </mds-price-table-features-row>
</mds-price-table-features>

<!-- CORRECT -->
<mds-price-table>
  <mds-price-table-features label="Funzioni di base">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Do Not Slot Arbitrary HTML Directly Into <mds-price-table-features>

The default slot of <mds-price-table-features> expects only mds-price-table-features-row elements. Slotting raw <tr>, <div>, or other markup bypasses the row-width calculation logic and breaks the table structure.

<!-- INCORRECT -->
<mds-price-table>
  <mds-price-table-features label="Funzioni">
    <tr>
      <td>Utenti</td>
      <td>10</td>
    </tr>
  </mds-price-table-features>
</mds-price-table>

<!-- CORRECT -->
<mds-price-table>
  <mds-price-table-features label="Funzioni">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">10</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Do Not Add Slot Content to supported or unsupported Cells

type="supported" and type="unsupported" render a built-in icon and ignore any slotted content. Adding text or components inside these cells is silent dead markup.

<!-- INCORRECT -->
<mds-price-table-features-cell type="supported">Incluso</mds-price-table-features-cell>
<mds-price-table-features-cell type="unsupported">Non disponibile</mds-price-table-features-cell>

<!-- CORRECT -->
<mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
<mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>

Do Not Use type="text" as a Label Column

The type="text" cell wraps its slot in a detail-typography <mds-text> element - it is meant for per-plan values, not for the feature name. Use type="label" for the first (feature-name) cell of each row.

<!-- INCORRECT -->
<mds-price-table-features-row>
  <mds-price-table-features-cell type="text">Spazio di archiviazione</mds-price-table-features-cell>
  <mds-price-table-features-cell type="text">10 GB</mds-price-table-features-cell>
</mds-price-table-features-row>

<!-- CORRECT -->
<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">Spazio di archiviazione</mds-price-table-features-cell>
  <mds-price-table-features-cell type="text">10 GB</mds-price-table-features-cell>
</mds-price-table-features-row>

Do Not Omit Consistent Column Count Across Rows

Every mds-price-table-features-row in the same section must have the same number of cells. The row component computes each cell width as 100% / cellCount; mismatched counts produce misaligned columns.

<!-- INCORRECT - first row has 4 cells, second has 3 -->
<mds-price-table-features>
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">5</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">20</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">Illimitati</mds-price-table-features-cell>
  </mds-price-table-features-row>
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Supporto</mds-price-table-features-cell>
    <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
    <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  </mds-price-table-features-row>
</mds-price-table-features>

<!-- CORRECT - every row has the same number of cells -->
<mds-price-table-features>
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Utenti</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">5</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">20</mds-price-table-features-cell>
    <mds-price-table-features-cell type="text">Illimitati</mds-price-table-features-cell>
  </mds-price-table-features-row>
  <mds-price-table-features-row>
    <mds-price-table-features-cell type="label">Supporto</mds-price-table-features-cell>
    <mds-price-table-features-cell type="unsupported"></mds-price-table-features-cell>
    <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
    <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  </mds-price-table-features-row>
</mds-price-table-features>

Do Not Customize via Undocumented ::part() Selectors

The only documented shadow part is header. Targeting internal elements (the table, tbody, or the mds-text inside the header) via other ::part() selectors or >>> couples your code to the internal structure and will break on updates.

/* INCORRECT */
mds-price-table-features::part(table) {
  border-radius: 8px;
}
mds-price-table-features >>> table {
  border: 2px solid red;
}

/* CORRECT */
mds-price-table-features {
  --mds-price-table-features-border-color: rgb(var(--magma-accent-border));
  --mds-price-table-features-padding: calc(var(--spacing) * 400);
}
mds-price-table-features::part(header) {
  background: rgb(var(--magma-wash-base));
}