Common incorrect uses of <mds-breadcrumb>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Slot Raw HTML Inside <mds-breadcrumb>

The default slot accepts only <mds-breadcrumb-item> elements; slotting arbitrary HTML breaks the internal selection-tracking and back-button logic.

<!-- INCORRECT -->
<mds-breadcrumb>
  <a href="/home">Home</a>
  <span>Archivio</span>
  <strong>Documento corrente</strong>
</mds-breadcrumb>

<!-- CORRECT -->
<mds-breadcrumb>
  <mds-breadcrumb-item label="Home"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Archivio"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Documento corrente" selected></mds-breadcrumb-item>
</mds-breadcrumb>

Do Not Use <mds-breadcrumb-item> Outside <mds-breadcrumb>

Child items rely on the parent for ID assignment and selection-state management. Rendered standalone they get no back button, no sibling deselection and no mdsBreadcrumbChange.

<!-- INCORRECT -->
<div class="my-nav">
  <mds-breadcrumb-item label="Home"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Sezione" selected></mds-breadcrumb-item>
</div>

<!-- CORRECT -->
<mds-breadcrumb>
  <mds-breadcrumb-item label="Home"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Sezione" selected></mds-breadcrumb-item>
</mds-breadcrumb>

Do Not Pass Text or HTML as <mds-breadcrumb-item> Children

<mds-breadcrumb-item> has no default slot; the label prop is the only way to set the visible text. Text or HTML placed between the tags is ignored and never rendered.

<!-- INCORRECT -->
<mds-breadcrumb>
  <mds-breadcrumb-item>
    <strong>Categoria</strong>
  </mds-breadcrumb-item>
  <mds-breadcrumb-item selected>
    <span class="active">Sottocategoria</span>
  </mds-breadcrumb-item>
</mds-breadcrumb>

<!-- CORRECT -->
<mds-breadcrumb>
  <mds-breadcrumb-item label="Categoria"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Sottocategoria" selected></mds-breadcrumb-item>
</mds-breadcrumb>

Do Not Manage Selection State Manually by Toggling Classes

The parent tracks which item is selected internally; toggling CSS classes or aria-current on the host bypasses that logic and leaves the back button in an inconsistent state. Use the selected prop instead.

<!-- INCORRECT -->
<mds-breadcrumb>
  <mds-breadcrumb-item label="Home" class="is-active" aria-current="page"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Archivio"></mds-breadcrumb-item>
</mds-breadcrumb>

<!-- CORRECT -->
<mds-breadcrumb>
  <mds-breadcrumb-item label="Home" selected></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Archivio"></mds-breadcrumb-item>
</mds-breadcrumb>

Do Not Pierce the Shadow DOM to Style the Internal Back Button

The back button rendered inside <mds-breadcrumb> is a private implementation detail: it exposes no part, and no documented --mds-breadcrumb-* CSS custom property reaches it. To remove it, set hide-back.

/* INCORRECT */
mds-breadcrumb >>> .back {
  background: red;
}
mds-breadcrumb::part(back) {
  display: none;
}

/* CORRECT - no part or custom property reaches the back button: remove it with hide-back */

<!-- CORRECT -->
<mds-breadcrumb hide-back>
  <mds-breadcrumb-item label="Home"></mds-breadcrumb-item>
  <mds-breadcrumb-item label="Archivio" selected></mds-breadcrumb-item>
</mds-breadcrumb>