Stylish HTML: Anchor Popovers without distinct Anchor Names

Double-dashed IDs and the enhanced attr() CSS function allow us to bind popovertargets with their popovers without having to create distinct anchor-names.

<button popovertarget="--dropdown-example"></button>
<div id="--dropdown-example" popover></div>
<button popovertarget="--dropdown-example"></button>
<div id="--dropdown-example" popover></div>

[popovertarget] {
  /* Dynamically generate anchor-name from the popovertarget attribute value */
  anchor-name: attr(popovertarget type(<custom-ident>));
}
 
[popover] {
  /* Dynamically bind to anchor using the menu's id attribute */
  position-anchor: attr(id type(<custom-ident>));
 
  /* Position at bottom of anchor, aligned to left edge */
  top: anchor(bottom);
  left: anchor(left);
}
[popovertarget] {
  /* Dynamically generate anchor-name from the popovertarget attribute value */
  anchor-name: attr(popovertarget type(<custom-ident>));
}

[popover] {
  /* Dynamically bind to anchor using the menu's id attribute */
  position-anchor: attr(id type(<custom-ident>));

  /* Position at bottom of anchor, aligned to left edge */
  top: anchor(bottom);
  left: anchor(left);
}

The key insight is using attr() with type(<custom-ident>) to dynamically read attribute values as CSS identifiers. This lets you use the same ID value for both the popovertarget attribute and the anchor-name/position-anchor properties.

Demo: