oddbird / css-anchor-positioning

Polyfill for CSS Anchor Positioning
https://anchor-positioning.oddbird.net/
BSD 3-Clause "New" or "Revised" License
265 stars 10 forks source link

applying the polyfill to dynamic elements #91

Open dreyks opened 1 year ago

dreyks commented 1 year ago

Hey! thx for the polyfill!

I'm trying to bolt it onto a dropdown and I'm applying the polyfil after the dropdown is open. This works. But when I close the dropdown and open it again - the css-vars on the element aren't being set.

As far as I understood from the code since the CSS was already transformed and there are no anchor() functions anymore no elements are targeted

is it somehow possible to achieve what i'm trying to achieve? :)

UPD: ahh, I see now that "dynamically added/removed anchors or targets" is not yet supported 😢

fwiw, I'm ready to help if any help is needed

jgerigmeyer commented 1 year ago

@dreyks Thanks for your offer! We're always happy for contributions. 😄

I am planning to take a look at this issue in the next few days, starting by providing an API for users to re-run the polyfill on demand. It's a bit tricky because the polyfill makes changes directly to the original source CSS, so re-running it isn't as simple as just doing the same thing again. But I have some ideas of how to address this. (Then later hopefully we can also add an observer or something so that the polyfill itself can re-run intelligently.)

In this case it would be helpful if you could share the HTML/JS code you're trying to run -- that way as I work on it I can test directly against your use-case (and add it to the demo page).

dreyks commented 1 year ago

thx for the response!

i'm doing this on a closed-source ui library, i'll try to craft a simplified example

dreyks commented 1 year ago

meanwhile, I've moved the definition of anchorFunctions outside of parseCSS here so that it is maintained between polyfill invocations and now everything seems to be working, but i'm not sure it's the most performant solution 😂

dreyks commented 1 year ago

here's an example (i realized I forgot how to write DOM-oriented JS without React 😂 )

https://codesandbox.io/s/wonderful-darkness-tmslme?file=/index.html

it shows text hints depending on if it's polyfilled or native

jgerigmeyer commented 1 year ago

@dreyks Apologies for the delay here, I've needed to focus on other projects for the past month or so. I still hope to get to this feature before too long, but in the meantime contributions are welcome if you (or anyone) is motivated to submit a PR! 😄

lucsoft commented 7 months ago

Any updates on this? Seeing how Chrome will land CSS Anchor Positioning, in May, would be great to have this issue solved :)

jgerigmeyer commented 7 months ago

@lucsoft I agree! 😅

I'm hoping to spend some time on this in April, but honestly we could also use help from the community. Code contributions are welcome, as well as financial support (especially from companies that plan to use this in production).