demo · v131

list-collision: per-row badge anchors

Two side-by-side todo lists each render rows with an anchor-name: --tag on the tag chip and a positioned badge. Without scope, duplicate names make five badges collapse to the final tag. Toggle anchor-scope: --tag on each row and watch every badge snap back to its own row.

list A — engineering

  • migrate metrics pipelineinfra3d
  • fix auth retry storminfra1d
  • review PRsinfratoday

list B — design

  • onboarding mocksdesign5d
  • token auditdesign2w
  • brand refreshdesignq3
Measuring anchor positions...

All six badges share position-anchor: --tag. Row-level scope is the only thing keeping each one attached to its own row instead of the last duplicate anchor.

why this is the killer case

Lists, tables, cards in a grid — every row is a candidate. Before anchor-scope, the only safe option was to generate a unique anchor name per row (--tag-1, --tag-2, ...) and rewrite the positioned descendant to match. Now the same author CSS works for any list length because each row can keep the reused name private.

the api

li.row { anchor-scope: --tag; }  /* --tag is private to this row */
.tag { anchor-name: --tag; }
.badge {
  position-anchor: --tag;
  top: anchor(top);
  right: anchor(right);
}

see also