[css-anchor-position] Full markup and CSS examples

https://tabatkins.github.io/specs/css-anchor-position/#anchor-name:~:text=the%20%3Cdashed%2Dident%3E%20specifies%20the%20anchor%20name%20of%20the%20anchor%20element%20it%20will%20be%20drawing%20positioning%20information%20from

Hi, I've been working on an implementation of a polyfill of CSS Anchor Positioning with @oddbird and have run into some confusion due to there being no up to date/correct markup examples. For example we are currently confused by the use of anchor name vs anchor id vs anchor attribute and how this relates to the CSS rules.

We'd love to have a full example of the HTML markup and corresponding CSS so the API of the polyfill matches the real implementation closely.

For example, in this section it's difficult to work out whether the --foo ident refers to an ID, an anchor name, an anchor attribute value, or something else: https://tabatkins.github.io/specs/css-anchor-position/#anchor-name:~:text=For%20example%2C%20in,lengths%20in%20each.

Start with the linked CSS Anchor Positioning specification, especially the anchor-name section and its existing examples. Add a complete HTML markup and corresponding CSS example that makes the relationship between anchor name, anchor id, anchor attribute, and CSS rules unambiguous; done means the API usage can be followed without guessing.