Inconsistent When Passing CSS Variables in Svelte

[sunflower-knight]

Describe the bug

I've defined a dynamically updating CSS variable --hue in App.svelte (updates every 50ms) and I'm passing it to Child components using four different methods:

Directly via Svelte's --bg-color property on the component tag
Via the style attribute setting --bg-color
Relying on CSS variable inheritance (parent defines variable, child uses it)
Referencing the parent variable in the style attribute with var(--parent-bg)

However, I've noticed that the colors displayed in the child components are inconsistent

Reproduction

https://svelte.dev/playground/5b8bf537ceb040ea9ece40788153d0a8?version=5.38.0

Logs

System Info

svelte playground + chrome

Severity

annoyance

[7nik]

When you pass style to a child, the child has to apply the style:

<script>
	let { children, style } = $props();
</script>

<div class="box" style={style}>

After this fix, they all have the same color to me.

---

<Child <style: --bg-color ="hsl({hue}, 70%, 60%)">

wtf you came up with?
Well, here the component just has a boolean prop <style:, which is unrelated to --bg-color.

[brunnerh]

(Usually you would do this to just forward all attributes and events)

<script>
	let { children, ...rest } = $props();
</script>

<div class="box" {...rest}>

I think this can be closed.

[sunflower-knight]

Close it