W4102: Dynamic class names are not scoped

Cause

A :class binding builds class names at runtime, and the compiler cannot scope names it cannot see, so they will not match your <style>.

Example

<contract>
{ "name": "Card", "role": "group", "parts": ["root"] }
</contract>
<script>
const c = state("a")
</script>
<template><div class="root" :class="c"></div></template>

What you see

WARNING  W4102  app/components/Card.tess:7:29
  Class names produced by :class are not scoped to this component, so they will not match classes in <style>.
  Use a data attribute, or if/else with static class attributes.
  Run `tessera explain W4102` for details.

Fix

Use class with static names and data- attributes for state, which are scoped and checked.

All errors and warnings