Common incorrect uses of <mds-calendar-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 Calendar

<mds-calendar-cell> is rendered by <mds-calendar> itself, one per day inside its shadow DOM. Used in isolation it loses the gap context that drives range connector geometry and no parent coordinates selection across cells; slotted into <mds-calendar>, which has no default slot, it is never shown. Let the calendar generate the cells.

<!-- INCORRECT -->
<mds-calendar-cell date="2024-06-10" label="10" month="current" selection="single"></mds-calendar-cell>

<!-- CORRECT -->
<mds-calendar single-picker start-date="2024-06-10"></mds-calendar>

Do Not Manage Selection State Locally in the Cell

The cell is purely presentational - it holds no internal state. Setting selection directly on isolated cells and keeping them in sync by hand duplicates the logic the parent calendar already owns and will diverge on re-renders.

<!-- INCORRECT: manually wiring selection outside mds-calendar -->
<div class="custom-grid">
  <mds-calendar-cell date="2024-06-03" label="3" selection="start"></mds-calendar-cell>
  <mds-calendar-cell date="2024-06-04" label="4" selection="middle"></mds-calendar-cell>
  <mds-calendar-cell date="2024-06-05" label="5" selection="end"></mds-calendar-cell>
</div>

<!-- CORRECT: let mds-calendar own range state and drive cell props -->
<mds-calendar start-date="2024-06-03" end-date="2024-06-05"></mds-calendar>

Do Not Pierce the Shadow DOM to Style Internals

The cells live in the shadow DOM of <mds-calendar>, and their own --mds-calendar-cell-* properties are declared on each cell, so from outside they are adjusted only through the custom properties <mds-calendar> documents for them. Targeting the internal .action, .inner-dot, or .area-background elements via >>> or undocumented class selectors couples your code to the implementation and will break on minor releases.

/* INCORRECT */
mds-calendar-cell >>> .area-background {
  background: hotpink;
}
mds-calendar-cell >>> .inner-dot {
  display: none;
}

/* CORRECT */
mds-calendar {
  --mds-calendar-cell-gap: calc(var(--spacing) * 100);
  --mds-calendar-cell-other-month-visibility: hidden;
}