[css-anchor-position] Allow using the anchor attribute as an anchor positioning shorthand

[mfreed7]

The Pop-Up API includes a new HTML attribute, anchor, which is intended to provide two things:

1. Establish the provided anchor element as an “ancestor” of this pop-up, for light-dismiss behaviors. In other words, the anchor attribute can be used to form nested pop-ups.
2. The referenced anchor element could be used by the Anchor Positioning feature.

The current spec and prototype for Anchor Positioning does not take the anchor attribute into account. It would seem like a useful shorthand, for example:

<div id=scroller>
  <button id=anchor-button>I'm the anchor</button>
</div>
<div popup>Pop-Up, anchored to button</div>

<style>
  button {
    /* No need to provide an anchor-name here */
  }
  [popup] {
    /* The anchor() function can just use a single argument, rather than needing to reference a name */
    left: anchor(left);
    top: anchor(bottom);
    /* anchor-scroll might even be implied by this usage */
  }
</style>

In addition to the above being fewer lines of code, it is more general. Each pop-up doesn't need to come up with an anchor-name - they can just be connected automatically via DOM.

[tabatkins]

A little confused here - did you intend to write <div popup anchor="anchor-button">?

If so, then yeah I can see this working. Now I'm glad I went ahead and future-proofed the syntax by requiring the anchor-name to be a dashed-ident, as it means we can easily tell it apart from the other keywords.

So I suppose we could make the anchor name optional in anchor() and anchor-size(), and if you leave it off and the positioned element has an "implicit anchor element" given by the host language, we'll use that element (assuming it matches the rules for being a target anchor element).

If you omit the anchor-name and the host language isn't providing an implicit one, it'll just fail to find a target anchor element, like you specified a non-existent anchor name.

[mfreed7]

A little confused here - did you intend to write <div popup anchor="anchor-button">?

Gaah. I missed the most important part. You are correct - that’s what I meant to write.

If so, then yeah I can see this working. Now I'm glad I went ahead and future-proofed the syntax by requiring the anchor-name to be a dashed-ident, as it means we can easily tell it apart from the other keywords.

Awesome!

So I suppose we could make the anchor name optional in anchor() and anchor-size(), and if you leave it off and the positioned element has an "implicit anchor element" given by the host language, we'll use that element (assuming it matches the rules for being a target anchor element).

If you omit the anchor-name and the host language isn't providing an implicit one, it'll just fail to find a target anchor element, like you specified a non-existent anchor name.

That sounds exactly like what I’d expect. Thanks!