style.anchorScope()

style.anchorScope(scope) sets anchor-scope on an element. Inside that element, a positioned element finds only the anchors that are also inside it. Use it when a component with an anchor renders more than once on a page.

Example

import { style } from "stillwind/react";

const trigger = style.ref("trigger");
export const provider = style(trigger, trigger.asAnchor());
export const scope = style(style.anchorScope([trigger]));
export const popover = style("absolute", trigger.positionAnchor(), "top-[anchor(bottom)]");

const trigger = undefined;
export const provider = {className:"sw_im2u7 sw_trigger_xnn7w"};
export const scope = {className:"sw_tcyj3"};
export const popover = {className:"sw_vqbik"};

.sw_im2u7:where(.sw_trigger_xnn7w) {
  anchor-name: --sw-a-trigger-xnn7w;
}

.sw_tcyj3 {
  anchor-scope: --sw-a-trigger-xnn7w;
}

.sw_vqbik {
  position-anchor: --sw-a-trigger-xnn7w;
  position: absolute;
  top: anchor(bottom);
}

Three elements work together:

Put the scope on the ancestor that contains one anchor and its popover.

Inputs

Write the array or keyword directly in the call. When a variable in the array can hold one of several refs, the scope includes every ref that it can hold.

An empty array sets nothing, and repeated refs add nothing. ineffective-anchor-scope reports both.

style.anchorScope() only sets the CSS property. It does not attach a ref, it does not create an anchor name, and it does not affect .in() conditions.

You can also set the scope on the anchor itself with trigger.asAnchor(scope). See ref.asAnchor().

Generated code

The compiler turns the scope into generated anchor names or the keyword. When it knows every ref, no JavaScript reads the refs at runtime. Stillwind does not position elements with JavaScript; the browser’s CSS anchor positioning does.

See Element relationships for a complete example.