Skip to content

Useless mutations with class: directive #15351

Closed
@adiguba

Description

@adiguba

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 class bar, so he class will be "foo bar"
    • toggle_class('baz') will add the class baz, 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions