demo · v131

anchor-scope confines anchor names

Every row below permanently declares anchor-name: --target. Toggle anchor-scope to compare local lookups inside each list with a global probe outside both lists. The JavaScript only toggles the scope class and reads positions; it never rewrites anchor-name.

Scope collision lab

anchor-scope: checking anchor(): checking all rows expose --target

List A

A row 1

A row 2

A row 3

List A local badge

List B

B row 1

B row 2

B row 3

List B local badge

Global probe outside both lists

Measured result

Waiting for layout.

Scope on

Each list scopes --target to its own subtree. The local badge inside a list can resolve that list's rows, while the global probe outside both lists is prevented from leaking to the final row in the other component.

Scope off

The name table leaks. The global probe is after both lists in DOM order, so it resolves --target to the last matching row instead of being isolated from component internals.

the css

.scoped .list { anchor-scope: --target; }
.row { anchor-name: --target; }
.local-badge,
.global-probe {
  position: absolute;
  position-anchor: --target;
  top: anchor(--target bottom, 1rem);
  left: anchor(--target right, 1rem);
}