Support for CSS Anchoring properties in Style directive

[imagoiq]

Describe the bug

Hi,

I've noticed that I can't use the new CSS properties anchor-name and position-anchor in my style attribute. I guess it's because the Svelte validator does not support them?

What is the workaround? How can I disable this frustrating validation?

Reproduction

https://svelte.dev/playground/d85505659dec47b1b2c01a82309bdad7?version=5.25.8

Logs

System Info

Any
Svelte: 5.25.8

Severity

blocking all usage of svelte

[7nik]

anchor-name is supported only by Chromium browsers and indeed, in Chrome the style is set while in Firefox it isn't.
The property gets filtered out not by Svelte, but by the browser that doesn't support it.

[imagoiq]

Good catch. I should have look at the "js output" in the playground. Is there a way to force Svelte to set it through the template function? (which is working for raw text).

[7nik]

What is the point? Svelte sets the css property, but the browser silently rejects because doesn't support it: specs - step 2.2.
Edit: to elaborate, the property is set in browsers supporting it, for others it isn't and attempt to forcefully set it won't have effect anyway because the browsers do not support it. So, unless you have a selector like [style*='achor-name: --btn-info-world'], it doesn't make sense.

[imagoiq]

I'll find another way. The point was to use a polyfill for browsers that don't support it, like: https://github.com/oddbird/css-anchor-positioning