[css-anchor-position-1] Better reusability of anchor names #9045
Description
Spec: https://drafts.csswg.org/css-anchor-position-1/
The anchor name is currently defined to be a tree scoped reference (i. e. unique for the entire document). This makes it difficult to reuse.
For example tooltips on elements are often implemented using a class or an aria-label attribute together with a pseudo-element holding text from that attribute.
In this fiddle you can see that all 3 of the tooltips are positioned on the first element defining anchor-name, not on their closest ancestor as one may have expected.
Anchor names being unique throughout the document forces us to explicitly name an anchor for each and every one of those elements with tooltips. And there may be hundreds of them on the page.
If anchor-name was not defined as unique but was scoped instead, similar to container queries (container-name property), every element with anchor-name would create its own anchor. But then of course what to do with anchors that are not ancestors of an anchored element?
Perhaps it would be possible to introduce a modifier in the anchor selecting syntax, which will select not the first instance of an element with the given anchor name but the closest ancestor?
So, instead of:
anchor-default: --tooltip;we could write:
anchor-default: closest --tooltip;And instead of:
top: anchor(--tooltip);we could write:
top: anchor(closest --tooltip);