Closed
Description
Describe the bug
The class:directive
can produce multiple mutations on DOM.
Example with this code :
<script>
let { className, bar, baz } = $props();
</script>
<div class={className} class:bar class:baz>...</div>
Currently we got the following code :
$.template_effect(() => {
$.set_class(div, $.clsx($$props.className));
$.toggle_class(div, 'bar', $$props.bar);
$.toggle_class(div, 'baz', $$props.baz);
});
With the props { className: "foo", bar: true, baz: true }
:
- The SSR will generate
<div class="foo bar baz">...</div>
✅ - But on client site (with hydration or not) :
set_class()
will set the class to"foo"
toggle_class('bar')
will add the classbar
, so he class will be"foo bar"
toggle_class('baz')
will add the classbaz
, so he class will be"foo bar bar"
It would be nice to define the class once (except for the reactivity after that of course)
Reproduction
Need to watch the DOM, or add a MutationObserver on the page...
Logs
-
System Info
-
Severity
annoyance
Metadata
Metadata
Assignees
Labels
No labels