Common incorrect uses of <mds-bibliography>. 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 Slot Content - The Component Has No Slots

<mds-bibliography> builds its output entirely from props; it has no default slot and no named slots. Any children placed inside the tag are ignored.

<!-- INCORRECT -->
<mds-bibliography>
  Rossi, M. (2021). <em>Fondamenti di diritto amministrativo</em>. Maggioli Editore.
</mds-bibliography>

<!-- CORRECT -->
<mds-bibliography
  author="Mario Rossi"
  date="2021-03-15"
  name="Fondamenti di diritto amministrativo"
  publisher="Maggioli Editore"
></mds-bibliography>

Do Not Use url Without name

When name is absent the component renders no title element, so url has nowhere to attach and the hyperlink is never created. Always supply name together with url.

<!-- INCORRECT -->
<mds-bibliography
  author="Giulia Bianchi"
  date="2020-06-01"
  url="https://www.maggioli.com/catalogo/appalti"
></mds-bibliography>

<!-- CORRECT -->
<mds-bibliography
  author="Giulia Bianchi"
  date="2020-06-01"
  name="Appalti pubblici: guida pratica"
  url="https://www.maggioli.com/catalogo/appalti"
></mds-bibliography>

Do Not Pass an Author Array as a JavaScript Array Literal in HTML

The author prop expects a plain comma-separated string. An array is not supported: set from JavaScript it throws, because the parser calls string methods on it, and in HTML the bracket or JSON syntax is not a supported format, even where the parser happens to read it.

<!-- INCORRECT -->
<mds-bibliography
  author="['Mario Rossi', 'Luigi Verdi']"
  name="Gestione del territorio"
></mds-bibliography>

<!-- CORRECT -->
<mds-bibliography
  author="Mario Rossi,Luigi Verdi"
  name="Gestione del territorio"
></mds-bibliography>

Do Not Use rel Without a URL

The rel attribute only takes effect when the title is rendered as a hyperlink (i.e. when both name and url are set). Setting rel="author" alone has no semantic effect and may confuse automated link checkers that scan for rel on anchors.

<!-- INCORRECT -->
<mds-bibliography
  author="Enrico 'De Luca'"
  name="Sociologia delle organizzazioni"
  rel="author"
></mds-bibliography>

<!-- CORRECT -->
<mds-bibliography
  author="Enrico 'De Luca'"
  name="Sociologia delle organizzazioni"
  url="https://www.maggioli.com/catalogo/sociologia"
  rel="author"
></mds-bibliography>

Do Not Invent a format Value Outside the Three Accepted Styles

Only 'apa', 'mla', and 'turabian' are valid. Passing an unrecognised string leaves the format branch unmatched and renders only the author portion (no date, title, location, or publisher).

<!-- INCORRECT -->
<mds-bibliography
  format="chicago"
  author="Francesca Conti"
  name="Sociologia del lavoro pubblico"
></mds-bibliography>

<!-- CORRECT -->
<mds-bibliography
  format="turabian"
  author="Francesca Conti"
  name="Sociologia del lavoro pubblico"
></mds-bibliography>

Customize via Documented CSS Vars, Not Internal Selectors

The supported customization surface is the three --mds-bibliography-* CSS custom properties. Targeting the .link class or other internals via shadow-piercing selectors or undocumented ::part() names couples your code to the implementation and will break on minor releases.

/* INCORRECT */
mds-bibliography >>> .link {
  color: blue;
}
mds-bibliography::part(link) {
  text-decoration: none;
}

/* CORRECT */
.sezione-riferimenti mds-bibliography {
  --mds-bibliography-color: rgb(var(--magma-accent-fg));
  --mds-bibliography-text-decoration: rgb(var(--magma-accent-border));
  --mds-bibliography-text-decoration-hover: rgb(var(--magma-accent-fg));
}