Skip to content

svelte:element Boolean Attributes don't get handled like propper elements (disabled="false") #7478

@SarcevicAntonio

Description

@SarcevicAntonio

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.0

Severity

annoyance


Workaround

use disabled={disabled || null} instead

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