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

• 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?