[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 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).
• 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. Otherwise it has no effect
• ::tether is a tree-abiding pseudo-element that creates an absolutely-positioned box, which is inserted as a sibling after its originating element in the box tree¹
• ::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²

Notes:
¹ This allows ::tether to use its originating element as well as the originating element's anchor as anchor elements
² 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, or any other short syntax for simple position fallbacks.

The original proposal 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 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.

Start with the parent issue 9117, the CSS Anchor Positioning Exploration tether proposal, and the linked automatic position fallbacks issue 9196. Review the unresolved questions around fallback behavior, @try, and transform-based arrows. Done means the CSS Working Group has reached a resolved design suitable for adding to Anchor Positioning Level 2.