CSS Anchor Positioning: anchor-scope

concepts

1. anchor-scope

   anchor-scope confines anchor-name lookups to a subtree. Stops duplicate anchor names in different lists from colliding.

2. Ancestor-scoped components

   The canonical motivating use case: each component wraps its trigger and popover in an ancestor anchor-scope host, keeping reused internal anchor names inside that subtree.

3. all vs none vs name

   Toggle between the three values (none, all, and a specific dashed-ident) and watch two parallel widgets either collide or stay isolated.

4. List-collision badges

   Two side-by-side todo lists with per-row tag + badge anchors. The killer case for anchor-scope — without row scope, duplicate names stack badges on the final tag.

5. Menu Anchor Scope

   A navigation bar where three trigger buttons all share anchor-name: --item-anchor. anchor-scope on each list item ensures every popover submenu opens beneath its own trigger, not the last one.

6. Tooltip Grid

   A data grid with one info-button per cell — all using the same anchor name. anchor-scope on each cell confines resolution so each tooltip appears next to its own button, not the last one in the DOM.

why it shipped

The anchor-scope property allows limiting the visibility of anchor names to a given subtree.

references

• ChromeStatus entry
• Spec