Is a position:fixed popup possible?

[grokwich]

sl-popup is primarily used to position a popup relative so some other element (and tries to maintain the relative position as the viewport scrolls), which is great.

I'm also wondering if there is any way to do the same, except for some popup scenarios, when the viewport contents scroll i would like the popup to remain fixed relative to the viewport (behavior like-a "position:fixed" popup)?

Is that possible?

Thank you.

[claviska]

Popup is really meant to tether things, so this isn't a use case I considered initially. However, the popup part is exposed, so you can override it with CSS using a media query or similar.

You may or may not need an !important to cancel out its inline styles but, at a glance, I believe this is possible. Maybe something like this:

sl-popup::part(popup) {
  left: auto !important;
  top: auto !important;

  /* your styles here */
}

[grokwich]

Yes, i understand. Thx for the lead, I'll play with it.

I just took a look the underlying foating-ui lib and noticed support for "virtual-elements"?

https://floating-ui.com/docs/virtual-elements

If i understand that correctly, i think i could achieve the "fixed" behavior by using a virtual element anchor.

Do you think your currently implementation would work if a vitutual element was assigned to "anchor" property of sl-popup?

This would be a very flexible means of supporting arbitrary positioning. Besides my scenario, this is used for the "Virtual" demo on the floating-ui home page (popup following the mouse position)...

https://floating-ui.com/#:~:text=CodeSandbox-,Virtual,-Anchor%20relative%20to

Thanks for the feedback Cory.

[claviska]

We currently hardcode the anchor element in computePosition(), but anchor could potentially be updated to support a virtual element. This would be useful for context menus, which is one of our wishlist components.

However, that might make types a bit more confusing, since we allow for both an element reference and a string id. Maybe we should add a separate property called virtualAnchor that, when provided, will be preferred over anchor. It would provide a function with the required params, e.g.

popup.virtualAnchor = function() {
  return {
    x: 0,
    y: 0,
    top: 0,
    left: 0,
    bottom: 20,
    right: 20,
    width: 20,
    height: 20
};

This seems like a reasonable ask. Is this something you're interested in PR-ing?

[grokwich]

Cool. Yes a specialized property makes sense, and a popup menu sounds like another great usecase.
Sure, sounds like fun, i'll give a PR a crack (when i get a moment). I'll follow your guidelines.
https://shoelace.style/resources/contributing#pull-requests

Thanks Cory!

[claviska]

Awesome. I'll be happy to help by adding a section to the docs demonstrating the new functionality.

[claviska]

After thinking about it more, we probably want to follow the same API as Floating to ensure we're future-proofing it. I normally don't like to follow third-party APIs 1:1 because it locks us in, but this is very generic so I think it will be fine. We might even be able to reuse or alias their typings.

So instead of returning a getBoundingClientRect object, it should probably follow this structure:

const virtualEl = {
  getBoundingClientRect: () => range.getBoundingClientRect(),
  getClientRects: () => range.getClientRects(),
};