[BUG] Vue3 app polyfill does nothing

[rodhoward]

Describe the bug
Having loaded the polly fill both via vite bundling and http header methods I can't seem to get it to apply to my achor css.
I'm just not sure if this limitation "dynamically added/removed anchors or targets" applies to my case I supose it does as all elements are dynamically added after page load.

Any hints on how to use it in a framework like Vue3 would be great.

To Reproduce

1. Add css anchor tags to vue3 components works great in chrome.
2. Add polly fill

example css anchor styles I'm using:
style="position-anchor: --skphuurbho; anchor-name: --arrowskphuurbho; top: anchor(bottom); right: anchor(right);"
Where the anchor position names are randomly generated as each component is created.

Expected behavior

1. Works on Chrome (no poly fill required)
2. Works on Firefox and Safari (polyfill doing its thing)

Browsers tested on
Chrome latest (works great)
Firefox 133 (doesn't work polyfill doesn't seem to do anything)

Additional context
Working in Ubuntu.

[jamesnw]

There could be a few different things happening here- would you be able to make a minimal recreation, perhaps on Codepen with their Vue template?

First, it appears that Vue pre-processes inline styles, and removes any that the browser doesn't support. This is great for prefixing, but not so great here. For example, in this playground, if you inspect the h1, it will have an anchor-name style in Chrome, but not in Safari.

If you're able to move the styles out of the inline template, perhaps using anchor-scope, it may work.

As far as the dynamically removed/added portion- polyfill will apply itself to any elements that are in the DOM when it is applied. If you add additional elements, the polyfill won't know about them yet.

Let us know if it's one of these two issues, or something else. Thanks!

[rodhoward]

Hi James,

Thanks for you feedback! I did notice that the styles where missing in firefox I just thought firefox must have removed them I didn't realise inline styles where removed by vue.

Here is a little Vue SFC Playground example of the issue and possible wrok around. This example is currently working for me in firefox. However if you remove the class from the two elements then the inline styles will NOT be enough as they are removed.

This doesn't really solve my problem because I'm building components e.g. a dropdown for use anywhere on the parent application. So each of these components needs a unique anchor name.. Hence my random names and the inline styles.

Thanks again for your quick response hopefully this helps others.

Cheers
Rod

ps
After playing around a little more there is a slightly ugly work around that might work.. You simply need to define a resonably large set of anchor names and find a way to pick one that isn't in use.. So something like this might be workable.. Using predefined named anchors

[jamesnw]

Thanks for the reproduction! I don't think there's anything we can do at the polyfill level to support inline styles in Vue- they just don't exist at the point we need them.

I think your use case is exactly what anchor-scope is for- as long as you can colocate your anchor and anchored item within a wrapper (or can put the anchored item inside the anchor), anchor-scope will prevent the algorithm from looking for an anchor outside that scope.

Here's an example that shows it working without IDs.

It also demonstrates the current limitation of the polyfill- when you click "Load Polyfill" it will apply the anchor to each element that is currently present in the dom, but won't add it to new elements.

I don't think there are changes to be made here, so I'll close this out, but link #91 so others can find the examples if they are useful.

[rodhoward]

Thanks again and YES anchor-scope is exactly what I need.