Svelte removes styles assign with Javascript when updating the style attribute

[HighFunctioningSociopathSH]

Describe the bug

If I or any third-party library assigns styles to an element using Object.assign, Svelte will remove those styles when updating the element's style attribute. This is really annoying and limiting; Can't Svelte do something about this? This doesn't happen in React.

Reproduction

<script lang="ts">
  let width = $state("200px");
  function testAction(node: HTMLDivElement) {
    Object.assign(node.style, {
      position: "absolute",
      top: "0px",
      right: "0px",
    });
  }
</script>
<input type="text" bind:value={width} />
<div use:testAction style="width: {width}; height: 200px; background: red;"></div>

REPL
Just change the width from 200px to 20px.

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 7.72 GB / 15.63 GB
  Binaries:
    Node: 23.11.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.4.1 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 10.13.1 - C:\nvm4w\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (136.0.3240.64)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[7nik]

When you set the attribute style, it sets the attribute, but not css properties, so anything outside Svelte is overwritten. You should avoid doing the same thing via Svelte and not-Svelte at the same time.
The current workaround is using the directive style:, which changes only the corresponding property, and keeping the attribute style static:

<div use:testAction style:width style="height: 200px; background: red;"></div>

REPL

[HighFunctioningSociopathSH]

This might fix a simple issue like this, but what would you do with more complicated scenarios, like when you are using components? Style directives don't work with components? Now I have to let the user of my Action know that if they want to pass styles that change, they need to pass a CSS variable to the parent element, and then pass a class to the element that uses that CSS variable. If you ask me, that isn't really "Svelte" by definition. Can't Svelte elements just go through the string, separate each property by the property's ending (;), and then assign them individually as they would with style directives?

[HighFunctioningSociopathSH]

Atleast give us the function Svelte uses for style directives. Something like the mount function that we can call with the element's ref and set a css style property for it, the same way that style directive work. This can also be used with components. Even though I feel like Svelte should handle this by default like I said in the last comment.

[7nik]

I have a feeling that your action design isn't good. Why do you need to set styles in the action? What does the action do?

[HighFunctioningSociopathSH]

Setting style is a fundamental thing. It has many applications. Right now I'm trying to animate an element so when animating it, I need to set position, top, left, transform and many other properties. Now if some user styles change, my styles vanish.
Aside from this, I really think the Svelte team should consider giving usable APIs for their built in functionalities such as bind: transition: use: and all the other things. I know Svelte needs to compile and turn these into to specific functions, but they can put limitations on how they can be used, the same ways React hooks have many limitations, for example they must called in the root, and in the same place. But atleast the api is there. It would open so many possibilities and working with components would become so much easier. Right now directives are more of a nuisance than convenient.

[7nik]

You animate - it doesn't have collisions with styles.

bind: is a prop with getter and setter. use: is deprecated in favor of @attach which can be passed as a prop. transition: - there are intentions to redesign it, but no ETA and no promises of doing it.

[HighFunctioningSociopathSH]

@7nik After implementing your suggestion, I encountered some unusual rendering issues, which I initially thought were unrelated to this problem. However, I discovered a significant issue with this approach. Let's say I want to fix my element in a certain position with a certain width and height, and then animate my element from there. If we go by your suggestion, I would have to animate the element like below =>

  node.animate([
    {
      top: "0px",
      left: "0px",
      width: "200px",
      height: "200px",
      transform: "translate(0px)"
    },
        {
      top: "0px",
      left: "0px",
      width: "200px",
      height: "200px",
      transform: "translate(200px)"
    },
  ], { duration: 2000})

Now, because top, left, width and height are included in the keyframes, the browser does things very differently; In my case, when using Chrome, this causes the animating element to become blurry, and animations run as if they think width and height were being animated, which means the translate is not smooth as it must be since browser tries to recalculate layout on every frame to account for width and height or even top and left changes even though they are not changing.
I can't add anything to the style or even the class attributes through JS because there is a high chance Svelte completely reassigns them. What would you do if you wanted to add some styles to the element with just JS? Imagine you are creating an Action or Attachment, and you only have the node; Maybe we can have some sort of API to add styles or classes that Svelte adds to its reassignments every time it updates the element?

[HighFunctioningSociopathSH]

Maybe Svelte can customize the style.setProperty function or add its own custom method to styles that are tracked by Svelte.

[7nik]

I am not sure if I'm able to replicate/see it.
What about using another animation to just set styling?

let anim = new Animation(new KeyframeEffect(
	node2,
	[{
		top: "0px",
		left: "0px",
		width: "200px",
		height: "200px",
	}, {
		// empty end frame
	}],
	{ delay: 2000, fill: "backwards" },
));
anim.play();