[csswg-drafts] [css-anchor-1] Reusing the implicit anchor name on the nested elements (#8913)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-1] Reusing the implicit anchor name on the nested elements ==
- 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](https://drafts.csswg.org/css-anchor-position-1/#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-name`s.

(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](https://drafts.csswg.org/css-anchor-position-1/#typedef-anchor-element)?
- Something else?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8913 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 3 June 2023 13:25:37 UTC