[css-anchor-position-1] Reusing the implicit anchor name on the nested elements

[kizu]

• Anchor positioning spec: https://drafts.csswg.org/css-anchor-position-1/
• Anchoring in the OpenUI popover explainer: https://open-ui.org/components/popover.research.explainer/#anchoring

We currently can use the implicit anchor element provided by the anchor attribute associated with some id. This would be mainly used for popovers (though, at least the current implementation in Chrome Canary allows this attribute and its implicit anchor on any element).

The issue is: we currently seem to only be able to use this implicit anchor on the element itself, but we don't have access to it in any other way?

What we could want is to somehow access this anchor from elements or pseudo-elements nested inside our popover (or another element with anchor on it). This can be useful when we'd want to use this element as the tooltip arrow or another connector that should span from the popover's anchor to the popover itself.

Here is an implementation of how this should work: https://codepen.io/kizu/pen/qBJQpjm?editors=1100 — using both the anchor attribute, and the explicitly set anchor-names.

(note that there is currently a bug where we have to use the anchor attribute even if we do not use the implicit anchor and override it with the anchor-default — https://bugs.chromium.org/p/chromium/issues/detail?id=1451095)

In the example above we'd want to have an element that is nested inside the popover and which spans from it to the button it is anchored with via an anchor attribute.

If we'd use an additional element, we could add the same anchor attribute, but that would mean duplicating things.

Some ideas of possible solutions:

• When we define the implicit anchor, make it somehow inherit to all the elements inside?
• Introduce a new value for the anchor-element?
• Something else?

[xiaochengh]

An easy fix, at least for your use case, would be saying a ::before or ::after pseudo element (which are the only pseudo elements that can create an OOF box, I suppose?) has the same implicit anchor element as the originating element.

---

Or if we want any child element to be able to use its parent's implicit anchor, then this may be solved by @tabatkins's proposal in #8181

The proposal says whenever we have an anchor element reference (either by implicit anchor, anchor-default or an anchor name), its computed value should be the actual anchor element instead of just a name.

Then we can do something like

.parent { anchor-default: implicit; } /* This should compute to the implicit anchor element */
.child { anchor-default: inherit; } /* Inherits the parent element's implicit anchor element */

[kizu]

I like the idea of a ::before and ::after having the same implicit originating element. Given that very often we could want to use those elements for things like popover arrows, it would be useful.

Though, in some cases we could want a more complicated structure, where we would have to use an actual extra element. In that case the proposal which would make the inherit getting the actual element from the parent sounds even better, and could be also used for the pseudo-elements.

[tabatkins]

Or if we want any child element to be able to use its parent's implicit anchor, then this may be solved by @tabatkins's proposal in #8181

Oooh yeah, that would work for a general solution, interesting. I think you pushed back on #8181 earlier for impl reasons - any new thoughts?

a ::before or ::after pseudo element (which are the only pseudo elements that can create an OOF box, I suppose?) has the same implicit anchor element as the originating element.

This is a pretty good narrow solution, tho. This feels like it should be pretty straightforward, so I'll just add it.

[xiaochengh]

I think you pushed back on #8181 earlier for impl reasons - any new thoughts?

Still really hard to implement.

[kizu]

In the OpenUI discord there was a question by @o-t-w about a certain common use case for the ::backdrop:

One UX feature that has become pretty common in the last few years is product tours - either as part of onboarding users to the product or to highlight new features to established users. Often in this pattern the rest of the page is dimmed as focus is drawn to one element of the UI. Popovers and anchor positioning would be useful here but using ::backdrop probably couldn't be made to work for this use case? Curious how people would approach this.

I tested it, and managed to re-create this effect with a ::backdrop and anchor positioning (https://codepen.io/kizu/pen/zYMBwNQ?editors=1100), however, it seems that we should also allow the ::backdrop to use the originating element as well as an implicit anchor, as it would make it possible to then use it for similar use cases much more conveniently.

[xiaochengh]

^ Adding ::backdrop sounds reasonable to me

[tabatkins]

(Reviewed this with Elika today, we're both good with it.)