Svelte action bug

[alvissraghnall]

Describe the bug

I'm solving this issue using a custom action that set the class(es) I need on the body.

classList.ts

import type { Action } from "svelte/action";

export const classList: Action<Element, string | string[]> = (node, classes) => {
  const tokens = Array.isArray(classes) ? classes : [classes];
 node.classList.add(...tokens);

 return {
   destroy() {
      node.classList.remove(...tokens);
    },
 };
};

+page.svelte

<script lang="ts">
   import { classList } from "$lib/actions/classList";
</script>

<svelte:body use:classList={showContent ? 'overflow-hidden' : 'overflow-initial'} />

Via: https://github.com/sveltejs/svelte/issues/3105#issuecomment-1868458487

However, when I use it across multiple components — say, HappyModal & SoftModal, it gets registered twice, and when one modal is clicked open, it doesn't trigger update on document body's style, because the other modal is closed and has assigned 'overflow-initial'.

Reproduction

jjk

Logs

System Info

System:
    OS: Linux 6.2 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    Memory: 2003.96 MB / 7.66 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.15.1 - ~/.nvm/versions/node/v22.15.1/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.15.1/bin/npm
    bun: 1.2.13 - ~/.bun/bin/bun
  npmPackages:
    svelte: ^5.30.1 => 5.31.1

Severity

annoyance

[alvissraghnall]

Off the top of my head, I can guess why this is:

both svelte:body are active on the page at the same time and neither gets "destroyed", well because, I can't exactly put the svelte:body in a conditional — as it ought to be at top-level of file. A possible solution would be to move the component call entirely into a conditional — and probably leave at top level of file, but well well well…

[plgingras88]

Off the top of my head, I can guess why this is:

both svelte:body are active on the page at the same time and neither gets "destroyed", well because, I can't exactly put the svelte:body in a conditional — as it ought to be at top-level of file. A possible solution would be to move the component call entirely into a conditional — and probably leave at top level of file, but well well well…

I am thinking out loud : did you also think about only putting the <svelte:body /> in its own component and call this component conditionnally ? A little more composable, but still depend on what you need at the end of the day!

[paoloricciuti]

This feels like normal to me: you have two svelte:body both actions are applied, when you open one Modal it adds some classes but since you are closing the other you are cleaning up the rest...are you expecting it should magically know that it doesn't have to remove the class that was added by the other action?