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

The component is a compound child of <mds-price-table> and relies on it (or on the <mds-price-table-header> inside it) for the stacking and the column grid it shares with the other plans. Using it standalone breaks the multi-column layout and misrepresents the pricing comparison.

<!-- INCORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Base</mds-text>
  <mds-text typography="h2" slot="price">49 &euro;</mds-text>
  <mds-button slot="action" variant="dark">Scegli</mds-button>
</mds-price-table-list>

<!-- CORRECT -->
<mds-price-table>
  <mds-price-table-list>
    <mds-text typography="h5" slot="header">Piano Base</mds-text>
    <mds-text typography="h2" slot="price">49 &euro;</mds-text>
    <mds-button slot="action" variant="dark">Scegli</mds-button>
  </mds-price-table-list>
</mds-price-table>

Do Not Place Feature Items in the header Slot

The header slot is for the plan title and description only. <mds-price-table-list-item> assigns itself to the item slot when it renders, overwriting slot="header": the attribute is dead markup that only holds the row in the header region until it hydrates, then the row moves to the content region anyway. Leave the slot attribute off.

<!-- INCORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Pro</mds-text>
  <mds-price-table-list-item slot="header" supported>Funzionalita avanzate</mds-price-table-list-item>
  <mds-text typography="h2" slot="price">99 &euro;</mds-text>
  <mds-button slot="action" variant="primary">Attiva</mds-button>
</mds-price-table-list>

<!-- CORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Pro</mds-text>
  <mds-price-table-list-item supported>Funzionalita avanzate</mds-price-table-list-item>
  <mds-text typography="h2" slot="price">99 &euro;</mds-text>
  <mds-button slot="action" variant="primary">Attiva</mds-button>
</mds-price-table-list>

Do Not Replace <mds-price-table-list-item> with Raw HTML List Elements

The component has no default slot, so a <ul> without a slot attribute is not rendered at all; and even in the item slot, raw <li> or <span> elements lose the consistent supported/unsupported icon and the typography sizing of <mds-price-table-list-item>.

<!-- INCORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Base</mds-text>
  <ul>
    <li>Funzionalita di base</li>
    <li>10 utenti</li>
  </ul>
  <mds-text typography="h2" slot="price">29 &euro;</mds-text>
  <mds-button slot="action" variant="dark">Scegli</mds-button>
</mds-price-table-list>

<!-- CORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Base</mds-text>
  <mds-price-table-list-item supported>Funzionalita di base</mds-price-table-list-item>
  <mds-price-table-list-item supported>10 utenti</mds-price-table-list-item>
  <mds-text typography="h2" slot="price">29 &euro;</mds-text>
  <mds-button slot="action" variant="dark">Scegli</mds-button>
</mds-price-table-list>

Do Not Set supported="false" as a String

supported is a boolean attribute: remove it entirely to show the unsupported (dash) state, the convention for every Magma boolean (agents/conventions.md). Stencil does parse "false" as false, but the attribute stays in the markup until the component hydrates and its reflection removes it, so a [supported] selector or any code reading the attribute sees it set in the meantime.

<!-- INCORRECT -->
<mds-price-table-list-item supported="false">Esportazione dati</mds-price-table-list-item>

<!-- CORRECT -->
<mds-price-table-list-item>Esportazione dati</mds-price-table-list-item>

Do Not Put the CTA in the price Slot

The price slot is for the price text only; the action slot is where <mds-button> belongs. Mixing them breaks the vertical stacking order and the footer layout.

<!-- INCORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Pro</mds-text>
  <mds-button slot="price" variant="primary">Attiva piano</mds-button>
</mds-price-table-list>

<!-- CORRECT -->
<mds-price-table-list>
  <mds-text typography="h5" slot="header">Piano Pro</mds-text>
  <mds-text typography="h2" slot="price">79 &euro;/mese</mds-text>
  <mds-button slot="action" variant="primary">Attiva piano</mds-button>
</mds-price-table-list>

Do Not Pierce the Shadow DOM to Style Internal Regions

The supported customization surface is --mds-price-table-list-separator-color and the three documented ::part() targets (header, content, footer). Targeting undocumented class names with >>> or deep selectors couples your code to the internal markup and breaks on minor releases.

/* INCORRECT */
mds-price-table-list >>> .main {
  background-color: yellow;
}
mds-price-table-list::part(separator) {
  height: 4px;
}

/* CORRECT */
mds-price-table-list {
  --mds-price-table-list-separator-color: rgb(var(--magma-accent-border) / 0.3);
}
mds-price-table-list::part(content) {
  gap: calc(var(--spacing) * 400);
}