Common incorrect uses of <mds-price-table-features-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 the Cell Outside Its Parent Hierarchy

The cell is a compound subpart and renders as display: table-cell. Used outside <mds-price-table-features-row> it loses all layout context and column alignment breaks.

<!-- INCORRECT -->
<div>
  <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
  <mds-price-table-features-cell type="text">20 GB</mds-price-table-features-cell>
</div>

<!-- CORRECT -->
<mds-price-table>
  <mds-price-table-features label="Caratteristiche">
    <mds-price-table-features-row>
      <mds-price-table-features-cell type="supported"></mds-price-table-features-cell>
      <mds-price-table-features-cell type="text">20 GB</mds-price-table-features-cell>
    </mds-price-table-features-row>
  </mds-price-table-features>
</mds-price-table>

Do Not Slot Content Into supported or unsupported Cells to Override the Icon

type="supported" and type="unsupported" always render the built-in icon regardless of slot content; slotted markup is not rendered at all. Use type="custom" if you need a different visual representation.

<!-- INCORRECT -->
<mds-price-table-features-cell type="supported">
  <mds-icon name="mi/baseline/star"></mds-icon>
</mds-price-table-features-cell>

<!-- CORRECT -->
<mds-price-table-features-cell type="custom">
  <mds-icon name="mi/baseline/star"></mds-icon>
</mds-price-table-features-cell>

Do Not Omit type="label" on the Feature-Name Cell

Without type="label", the first cell falls back to type="text" and its content is wrapped in <mds-text typography="detail">. This produces the wrong typographic weight for a row header and breaks the visual hierarchy.

<!-- INCORRECT -->
<mds-price-table-features-row>
  <mds-price-table-features-cell>Numero di 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">25</mds-price-table-features-cell>
</mds-price-table-features-row>

<!-- CORRECT -->
<mds-price-table-features-row>
  <mds-price-table-features-cell type="label">Numero di 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">25</mds-price-table-features-cell>
</mds-price-table-features-row>

Do Not Add Rich HTML Into a text Cell

type="text" wraps content in <mds-text typography="detail">; inserting block elements, interactive controls, or multiple children produces unpredictable layout inside that wrapper. Use type="custom" for anything more complex than a plain text string.

<!-- INCORRECT -->
<mds-price-table-features-cell type="text">
  <strong>20 GB</strong>
  <small> inclusi</small>
</mds-price-table-features-cell>

<!-- CORRECT -->
<mds-price-table-features-cell type="custom">
  <strong>20 GB</strong>
  <small> inclusi</small>
</mds-price-table-features-cell>

Do Not Pierce the Shadow DOM to Restyle Icon or Text Parts

The only supported customization surface for this component is --mds-price-table-features-cell-* CSS custom properties and the two documented shadow parts (icon, text). Targeting undocumented internal selectors will break on any minor release.

/* INCORRECT */
mds-price-table-features-cell >>> .icon--supported {
  fill: hotpink;
}

/* CORRECT */
mds-price-table-features-cell {
  --mds-price-table-features-cell-icon-supported-color: rgb(var(--label-orchid-06));
}
mds-price-table-features-cell::part(icon) {
  opacity: 0.8;
}