ref.asAnchor()

trigger.asAnchor(scope?) sets anchor-name on the element. Position another element against it with trigger.positionAnchor().

Example

import { style } from "stillwind/react";

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

const trigger = undefined;
export const button = {className:"sw_l9spr sw_trigger_xnn7w"};
export const popover = {className:"sw_mqosh"};

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

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

Inputs

The optional scope also sets anchor-scope on the element:

Write the array directly in the call. The array includes the trigger ref only when you list it. An empty array sets nothing, and ineffective-anchor-scope reports it.

Behavior

Pass trigger and trigger.asAnchor() in the same style() call. The anchor name applies only to an element that has the ref, and missing-ref-attachment reports a call without it.

To limit the anchor name from an ancestor instead, use style.anchorScope(). Stillwind generates CSS only, so check that the browsers you support implement anchor positioning.