Boolean attributes that evaluate to false not being omitted as expected

[mdubb86]

I'm almost certain I'm missing something here since I've seen this question asked/answered before but can't figure it out.

If you inspect the header element in the example below in devtools the 'hidden' attribute is completely removed when set to false (expected) but the 'disabled' attribute results in disabled="false" (unexpected).

https://svelte.technology/repl?version=2.8.0&gist=da9d9432c9aab7b8c47a5bd5c4f57b29

Is this expected behavior? Is there a defined list of attributes that are allowed? Thanks!

[Rich-Harris]

This is expected — disabled has no meaning in the context of an <h1> element, whereas hidden does. If it was a button instead, disabled would get treated as a boolean property rather than an unknown attribute (which would show up in the DOM).

You can see a list of the elements and attributes that get this treatment here — the list is derived from this MDN page.

[Conduitry]

Hm. I'm forgetting right now why this was necessary then. That's only getting used for SSR. The nuances of something that I must have previously thought I understood are eluding me.

The relevant issue was #1109. I'm going to read through that again.

Edit:

For DOM code, we'd continue to use the attributes-to-props lookup as it exists now, and rely on browsers to do the right thing.

This seems to be an important observation from my past self. The attribute-to-prop lookup is just for attributes that have corresponding props, and it basically then unrelated from what's happening during SSR, which obviously always uses the attribute name forms.

[Rich-Harris]

oh, yeah. that seems like it might be the wrong fix for that SSR problem; it should be determining whether it truly is a boolean attribute for the element in question. Is a real edge case though, probably doesn't need an urgent fix

[mdubb86]

Got it, sorry about that! I was using it on something like <a class="button">Anchor</a> and <a> is also not on that list. I'll see about using a <button> element instead. Thanks for your help!

[N-McA]

Some CSS frameworks seem to detect 'disabled' on tags; this means that using disabled={false} on an a element will render as disabled with Svelte. This seems like a bug to me.

[antony]

@N-McA I've just run into this with Bulma. It's pretty common practice now to use the [disabled] attribute selector, so this does indeed break the model.

[Conduitry]

If we're going to provide some nice way of conditionally including an attribute, it's going to be via something like #1434, and not via special handling of disabled that happens regardless of whether it's a valid boolean attribute on the given element. Closing.