[csswg-drafts] [css-anchor-position-?] Add a ::tether pseudo-element (#9271)

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

== [css-anchor-position-?] Add a ::tether pseudo-element ==
(This is a sub-topic of https://github.com/w3c/csswg-drafts/issues/9117)

The [Anchor Positioning Exploration](https://fantasai.inkedblade.net/style/specs/css-anchor-exploration/#tethers) proposal has a `::tether` pseudo-element that represents the "connection" area between the anchor and the anchored element. The advantages include:
- It can be very useful for use cases like drawing an arrow that points to the anchor (like [Floating UI's arrow](https://floating-ui.com/docs/arrow)).
- It may eliminate/deprioritize the need for descendants to query the active fallback position and apply conditional style (see https://github.com/w3c/csswg-drafts/issues/8585), since I'm not aware of other use cases of such queries

So I'm proposing adding this pseudo element to the spec. However, as this can become a very complicated topic and there are many details uncertain, I think this may better go into Level 2 of CSS Anchor Positioning.

We can also use this as an all-in-one issue about `::tether`, before reaching anything resolvable.

## (Rough) Proposal

Add a `::tether` pseudo-element to CSS Anchor Positioning Level 2:
- `::tether`'s originating element must be an absolutely positioned element with a valid [default anchor](https://www.w3.org/TR/css-anchor-position-1/#anchor-default). Otherwise it has no effect
- `::tether` is a [tree-abiding pseudo-element](https://drafts.csswg.org/css-pseudo-4/#tree-abiding) that creates an absolutely-positioned box, which is inserted as a sibling after its originating element in the box tree<sup>1</sup>
- `::tether` allows all properties and declarations as long as they don't break the previous bullet
- `::tether` can be nested in a `@try` block (like `@try { ::tether { ... } }`), so that the declarations apply only if the `@try` block is applied<sup>2</sup>

Notes:
<sup>1</sup> This allows `::tether` to use its originating element as well as the originating element's anchor as anchor elements
<sup>2</sup> This allows e.g. setting different arrow directions for different fallback positions, which is essentially a fallback position query as we mentioned earlier

## Discussions

One thing I'm particularly unsure about is how should `::tether` interact with [automatic position fallbacks](https://github.com/w3c/csswg-drafts/issues/9196), or any other short syntax for simple position fallbacks.

The [original proposal](https://fantasai.inkedblade.net/style/specs/css-anchor-exploration/#tethers) uses position-area-based UA stylesheet to set different borders for different position areas. However, we currently don't have position-area-based fallback syntax, so this doesn't easily apply. Also I've heard some thoughts that this might not satisfy all use cases (e.g., if the tether diagonally connects the two elements).

For [automatic position fallbacks](https://github.com/w3c/csswg-drafts/issues/9196) that auto-flips styles, we may consider auto-flip `::tether` style in a similar manner. The drawback is that it doesn't work with `transform`, which seems to be a common pattern to draw an arrow.

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


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

Received on Wednesday, 30 August 2023 03:05:56 UTC