Common incorrect uses of <mds-notification>. 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 a Floating Strategy When Slotted Inside mds-button

When <mds-notification> sits inside the notification slot of mds-button, the button’s own layout handles placement. Without a target the component switches itself to strategy="disabled"; giving it a target turns floating positioning back on, so the badge escapes the slot and positions itself relative to the viewport instead.

<!-- INCORRECT -->
<mds-button id="btn-messaggi" label="Messaggi" icon="mdi/email" variant="primary">
  <mds-notification slot="notification" target="#btn-messaggi" value="5"></mds-notification>
</mds-button>

<!-- CORRECT -->
<mds-button id="btn-messaggi" label="Messaggi" icon="mdi/email" variant="primary">
  <mds-notification slot="notification" value="5" strategy="disabled"></mds-notification>
</mds-button>

Do Not Omit target When Using a Floating Strategy

Without target, the component cannot locate its anchor, automatically falls back to strategy="disabled", and renders in document flow wherever the tag appears - usually in the wrong place.

<!-- INCORRECT -->
<mds-notification value="3"></mds-notification>
<mds-icon id="icona-posta" name="mi/baseline/mail"></mds-icon>

<!-- CORRECT -->
<mds-notification target="#icona-posta" value="3"></mds-notification>
<mds-icon id="icona-posta" name="mi/baseline/mail"></mds-icon>

Do Not Use <mds-notification> as a Status Dot Without a Count

<mds-notification> is a numeric counter badge. For a purely visual status indicator with no count, use mds-badge instead, which is designed for short status labels.

<!-- INCORRECT - abusing notification as a plain dot indicator -->
<mds-notification target="#utente-online" value="0"></mds-notification>

<!-- CORRECT - use mds-badge for status dots -->
<mds-badge variant="success" label="Online"></mds-badge>

Do Not Wrap the Target in a Relative Container and Use strategy="fixed"

strategy="fixed" anchors the badge to the viewport coordinate system. If the target sits inside a CSS-transformed or position: relative parent, fixed positioning will not track it correctly. Switch to strategy="absolute" and ensure the containing block has a non-static position.

<!-- INCORRECT - fixed badge inside transformed container -->
<div style="transform: translateX(0);">
  <mds-notification target="#btn-azioni" value="2" strategy="fixed"></mds-notification>
  <mds-button id="btn-azioni" label="Azioni"></mds-button>
</div>

<!-- CORRECT - absolute strategy with positioned containing block -->
<div style="position: relative;">
  <mds-notification target="#btn-azioni" value="2" strategy="absolute"></mds-notification>
  <mds-button id="btn-azioni" label="Azioni"></mds-button>
</div>

Do Not Pierce Shadow DOM to Style the Inner Dot

The internal .dot element is not a documented ::part(). Targeting it with ::part(dot) or deep-selector hacks breaks on any internal refactor. Use the documented --mds-notification-* CSS custom properties instead.

/* INCORRECT */
mds-notification::part(dot) {
  background-color: purple;
}

/* CORRECT */
mds-notification {
  --mds-notification-dot-background: rgb(var(--magma-warning-emphasis));
}