Add inset: auto to a polyfilled popover

[jpzwarte]

Closes #330

Fixes positioning of polyfilled popovers that use position-area by explicitly setting inset: auto on the target element inside the wrapper. Without this, the browser's default inset values on [popover] elements conflict with the wrapper-based positioning approach.

Also adds a demo example to index.html showing a popover anchored via position-area instead of anchor().

[netlify]

✅ Deploy Preview for anchor-position-wpt canceled.

Name	Link
🔨 Latest commit	c8851fc
🔍 Latest deploy log	https://app.netlify.com/projects/anchor-position-wpt/deploys/6a3a88cd8ca5dd0009811590

[netlify]

✅ Deploy Preview for anchor-polyfill ready!

Name	Link
🔨 Latest commit	c8851fc
🔍 Latest deploy log	https://app.netlify.com/projects/anchor-polyfill/deploys/6a3a88cde64b45000877401f
😎 Deploy Preview	https://deploy-preview-410--anchor-polyfill.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jamesnw]

Thanks for taking this on! I think this has 2 issues-

1. You've applied it to position-area uses, not popover. Not all popovers use position-area, and not all position-area uses are popover.
2. This overwrites existing insets on the element, but they need to be maintained.

Maybe the algorithm is "if the positioned element has the popover attribute, get the computed value of each inset. If it is 0, set to auto". (I'm less certain of tthe second step)

[jpzwarte]

Thanks for taking this on! I think this has 2 issues-

Does it make sense to have both position-area and inset?

I've added an if around setting inset: auto that checks if it's a popover.

[jamesnw]

Thanks for taking this on! I think this has 2 issues-

Does it make sense to have both position-area and inset?

I've added an if around setting inset: auto that checks if it's a popover.

Thanks for taking this on! I think this has 2 issues-

Does it make sense to have both position-area and inset?

Yeah, it is a legitimate use case- setting an inset allows you to position the content within the containing block generated by position-area, for instance if you want to offset it slightly from the anchor.

I've added an if around setting inset: auto that checks if it's a popover.

This still misses the case where it is a popover not using position-area. For instance, the demo above the one you added is setting margin:0 to accomplish the same thing. If inset: auto is applied to that, the margin can be removed.

[jpzwarte]

Yeah, it is a legitimate use case- setting an inset allows you to position the content within the containing block generated by position-area, for instance if you want to offset it slightly from the anchor.

I'll work on this; thanks.

I've added an if around setting inset: auto that checks if it's a popover.

This still misses the case where it is a popover not using position-area. For instance, the demo above the one you added is setting margin:0 to accomplish the same thing. If inset: auto is applied to that, the margin can be removed.

I think you're wrong here :) When i remove margin: 0, the native behavior matches the polyfilled behavior in the "Anchoring a popover" demo. So afaict, margin: 0 is needed even when you're not using the polyfill. I think this is due to the margin: auto user agent style.

[jpzwarte]

I'll work on this; thanks.

I've got it working! It checkes if the target is a popover and has a non-zero inset value, it removes the inset and sets it on the wrapper element.

[jamesnw]

This is close! Just a few small changes.

[jamesnw]

This looks good! Thanks for your work on this!