Hello -- I just wanted to give my 2 cents on the anchor positioning syntax/experience (a bit more declarative than the current proposal)

Connecting Anchor

This section is the same as the proposal:

<button id="menuButton" popup="menuPopup">Menu</button>
<popup id="menuPopup" role="menu" anchor="menuButton">
  <!-- Markup for menuitems goes here -->
</popup>

Anchor Positioning

My interpretation here would be that anchor is a CSS property with values relative to the connected anchor.

Values:

• top / block-end
• bottom / block-end
• left / inline-start
• right / inline-end
• center

These are combined in a space separated list:

#menuPopup {
  anchor: bottom center;
}

You could also use them individually with defaults, (i.e. anchor: left would likely default to left center.)

Viewport Optimization

I'd also propose an additional value (or property) to try to optimize for keeping the popup in the viewport. For the sake of this argument, let's call it optimizeVisibility, but this name is not something I am attached to.

This would tell the browser to start from the anchor position, i.e. if it is bottom center, and try to position it there. If this position would cause the element to go out of the viewport, the browser would reposition it to fit as close to bottom center as will fit within the viewport, but would remain visible in the screen. It might be more to the left of center if the popup button is on the top-right corner of the screen, for example.

Option A is to have this be a part of the anchor property:

#menuPopup {
  anchor: bottom center / optimizeVisibility;
}

Option B is to have this be a separate property with some relevant values:

This would allow for some offset

#menuPopup {
  anchor: bottom center;
  optimizeVisibility: viewport;
}

Viewport Offset

Another idea is to enable an offset from the viewport edge for the optimizeVisibility option:

Option A, a part of the anchor property:

#menuPopup {
  anchor: bottom center / optimizeVisibility 2rem;
}

Option B, separate property:

This would allow for some offset

#menuPopup {
  anchor: bottom center;
  optimizeVisibility: viewport;
  optimizeVisibilityOffset: 2rem;
}

Would love your thoughts!