demo · v131

anchor-scope keywords: all vs none vs name

There are three flavours of anchor-scope. The keyword all confines every anchor name in the subtree. The keyword none (the default) lets names leak. Naming a specific anchor (e.g. --card) confines just that one. Toggle to see the floaters jump.

widget 1
anchor 1 floats here
widget 2 (would steal anchor name without scope)
anchor 2 floats here

ok = each floater attaches to its sibling anchor. bad = floater jumps to the wrong widget because names leaked.

what each value does

  1. none (default)

    Anchor names are global. Two components using --a in the same DOM tree will clash; positioned descendants attach to whichever wins by tree order.

  2. all

    Every anchor name declared on this element's descendants is private. Multiple widget instances are now safe to ship.

  3. <dashed-ident>

    Confine just the listed names. Useful when one anchor must escape the scope (e.g. a tooltip that follows the page) but the rest stay private.

the api

/* Confine ALL anchor names declared inside this element */
.widget { anchor-scope: all; }

/* Confine a specific anchor */
.widget { anchor-scope: --card-anchor; }

/* Confine several */
.widget { anchor-scope: --primary, --secondary; }

see also