-
- Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Describe the bug
Using svelte:element results in boolean attributes being incorreclty set, or at least not like they would be set with propper elements.
Example (REPL with comparison to propper element)
<!-- SvelteElementButton --> <script> export let disabled = false; </script> <svelte:element {disabled} this={'button'} > <slot/> </svelte:element> <!-- App --> <SvelteElementButton> bla </SvelteElementButton> <!-- Renders --> <button disabled="false">bla</button> <!-- Expected --> <button disabled>bla</button>In this case it disables the buttons because disabled="false" will still make the browser disable the button.
I also tried using require with input elements and it's the same there: https://svelte.dev/repl/55ddd8362fa04dad908f0877a60f3377?version=3.47.0
I then also tried using hidden with the button again and there it seems to work as expected:
https://svelte.dev/repl/c8dd16ea3ebe4ff5aa8ddaca3db6ad34?version=3.47.0
A random thing I've found is using {...$$restProps} fixes it: https://svelte.dev/repl/7258278f483442bd9bcd64a6bec0d5ae?version=3.47.0
Reproduction
https://svelte.dev/repl/8c4f406ef863453cb7616cd5c0b796d7?version=3.47.0
Logs
No response
System Info
System: OS: macOS 12.3.1 CPU: (8) arm64 Apple M1 Pro Memory: 1.20 GB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm Browsers: Chrome: 100.0.4896.127 Firefox: 98.0.1 Safari: 15.4 npmPackages: svelte: ^3.47.0 => 3.47.0Severity
annoyance
Workaround
use disabled={disabled || null} instead