Skip to content

inert=false still added to element during server side renderingΒ #14731

@vnphanquang

Description

@vnphanquang

Describe the bug

Hello team, not sure if this is kit specific or should be reported in the Svelte repo. If the later, my apologies.

Somewhere in the past, support for better handling of inert was added to Svelte, probably since #7500, which only set inert when inert=true, because inert=false is still inert by the boolean attributes specs.

However, recently I found out that this behavior is not respected during SSR.

Reproduction

Please see https://github.com/vnphanquang/sveltekit-no-csr-inert-reproduction

To reiterate, src/routes/+page.ts...

export const csr = false;
export const ssr = true;

...and src/routes/+page.svelte...

<button inert={false}>Click me</button>

...together render...

<!-- omit for conciseness -->

<button inert="false">Click me</button>

<!-- omit for conciseness -->

Logs

No log, please inspect rendered html via browser devtool.

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 2.41 GB / 15.57 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.11.0 - ~/.volta/tools/image/node/22.11.0/bin/node
    Yarn: 4.5.1 - ~/.volta/tools/image/yarn/4.5.1/bin/yarn
    npm: 10.9.0 - ~/.volta/tools/image/node/22.11.0/bin/npm
    pnpm: 9.14.3 - ~/.volta/bin/pnpm
  Browsers:
    Chromium: 131.0.6778.139
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1
    @sveltejs/kit: ^2.9.0 => 2.11.1
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.2
    svelte: ^5.0.0 => 5.14.0
    vite: ^6.0.0 => 6.0.3

Severity

annoyance

Additional Information

This means false inert behaviors when JS is not available. Workaround for my particular use case:

export const inert = (function (node: Element, inert?: boolean) {
	node.toggleAttribute('inert', inert);
	return {
		update(inert) {
			node.toggleAttribute('inert', inert);
		},
	}
}) satisfies import('svelte/action').Action;

and

<button use:inert={false}>Click me</button>

Of course, this won't work if inert is to be true during ssr, in which case object spread is a possible workaround.

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