[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