-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
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.3Severity
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.