Common incorrect uses of <mds-video-wall>. 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 autoplay="false" or loop="false" to Disable Boolean Props

These props default to true, so removing the attribute keeps them on, and a boolean attribute is never written as the string "false": the attribute stays on the element, where attribute selectors and presence checks still read it as set. Set the JS property to false, or use a framework property binding, to turn these off.

<!-- INCORRECT -->
<mds-video-wall src="/assets/video/ambient.mp4" autoplay="false" loop="false"></mds-video-wall>

<!-- CORRECT (via JS property) -->
<mds-video-wall src="/assets/video/ambient.mp4"></mds-video-wall>
<script>
  const wall = document.querySelector('mds-video-wall');
  wall.autoplay = false;
  wall.loop = false;
</script>

Do Not Put Meaningful Content in the Default Slot

The default slot is projected inside the native <video> element and is shown only by browsers that cannot play video. Captions, headlines, CTAs, and any real UI must go in the content slot instead.

<!-- INCORRECT -->
<mds-video-wall src="/assets/video/ambient.mp4">
  <mds-text typography="h1">Benvenuto</mds-text>
</mds-video-wall>

<!-- CORRECT -->
<mds-video-wall src="/assets/video/ambient.mp4">
  Il tuo browser non supporta la riproduzione video.
  <div slot="content">
    <mds-text typography="h1">Benvenuto</mds-text>
  </div>
</mds-video-wall>

Do Not Wrap <mds-video-wall> in a Raw <video> Element

<mds-video-wall> already wraps a <video> internally. Nesting it inside another <video> is invalid HTML, produces no visible output, and makes the fallback slot unreachable.

<!-- INCORRECT -->
<video src="/assets/video/ambient.mp4" autoplay muted loop>
  <mds-video-wall src="/assets/video/ambient.mp4"></mds-video-wall>
</video>

<!-- CORRECT -->
<mds-video-wall src="/assets/video/ambient.mp4"></mds-video-wall>

Do Not Override Shadow DOM Internals Directly

The noise overlay is inside the Shadow DOM. Reach it only through the documented --mds-video-wall-noise-background-color custom property; do not pierce the shadow with >>> or undocumented selectors.

/* INCORRECT */
mds-video-wall >>> .noise {
  background-color: rgb(var(--magma-danger-emphasis-hover) / 0.5);
}

/* CORRECT */
mds-video-wall {
  --mds-video-wall-noise-background-color: rgb(var(--magma-danger-emphasis-hover) / 0.5);
}

Do Not Rely on preload While autoplay Is Active

The browser ignores the preload hint entirely when autoplay is set (which is the default). Only set preload after disabling autoplay via a JS property or framework binding.

<!-- INCORRECT (preload is silently ignored because autoplay is true by default) -->
<mds-video-wall
  src="/assets/video/ambient.mp4"
  preload="metadata"
></mds-video-wall>

<!-- CORRECT: disable autoplay first, then preload is honoured by the browser -->
<mds-video-wall
  src="/assets/video/showcase.mp4"
  poster="/assets/video/showcase-preview.webp"
  preload="metadata"
>
  <!-- set wall.autoplay = false via JS or framework binding -->
</mds-video-wall>