How to Configure Strict CSS Anchor-Scope in Google Chrome

In component-driven web architectures, naming collisions present a significant challenge when multiple repeating interface cards or list rows each declare anchored popovers and tooltips. Within Google Chrome, the modern CSS Anchor Positioning specification introduces anchor-scope to contain anchor resolution strictly within local subtrees. Configuring strict anchor-scope ensures that identical anchor names remain encapsulated without leaking into sibling or ancestor DOM hierarchies.

The Scope Collision Problem in Repeating Components

By default, anchor names registered with anchor-name: --item-trigger possess global scope within the document coordinate space. In a virtualised list or product grid where dozens of card components render identical anchor names, a tethered element (such as a contextual action menu) may inadvertently latch onto the wrong anchor instance elsewhere on the page.

To eliminate this issue without generating dynamic UUID strings in JavaScript, the CSS anchor-scope property isolates anchor name resolution strictly to the designated container boundary.

Declaring Strict Anchor-Scope Boundaries

To encapsulate anchor names within individual repeating components, declare anchor-scope on the parent container element:

/* Component wrapper scoping the anchor */
.product-card {
  anchor-scope: --card-action-anchor;
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

/* Local trigger button inside each card */
.product-card-button {
  anchor-name: --card-action-anchor;
}

/* Local contextual dropdown menu */
.product-card-menu {
  position: fixed;
  position-anchor: --card-action-anchor;
  top: anchor(bottom);
  left: anchor(start);
  margin-top: 4px;
}

With anchor-scope: --card-action-anchor declared on .product-card, any descendant element querying --card-action-anchor connects exclusively to the anchor defined inside its own card container, completely ignoring identical identifiers in neighbouring cards.

Scoping All Anchors with the All Keyword

When authoring generic component libraries or design system containers where multiple unknown anchor names might exist, use the all keyword to isolate all anchor identifiers within the container subtree:

.modal-dialog-container {
  anchor-scope: all;
  contain: layout;
}

This enforces total isolation: no internal anchor identifiers leak outward to the global document, and external tethered elements cannot target anchors located inside the scoped container.

Auditing Scoped Anchors in Chrome DevTools

Google Chrome DevTools provides targeted visual cues to verify anchor scoping rules:

1. Open DevTools (F12) and navigate to the Elements tab.
2. Select an anchored element inside a scoped component card.
3. Check the anchor badge in the DOM tree. DevTools confirms the exact DOM element to which the tether is bound.
4. In the Styles panel, verify that anchor-scope appears on the ancestor element without being crossed out.
5. Duplicate the component in the DOM. Notice that both instances maintain independent, error-free anchor resolution simultaneously.