Lit-html: Cannot set disabled property

[derappelt]

I have an template with an input element on wich I want to set the disabled property based on a variable.
html'<input type="number" value="${this.value}" disabled="${this.disabled}">'
works but even when disabled is set to false, the input field is still disabled, because the browser just checks if the property exists.

What I need is something like:
html'<input type="number" value="${this.value}" ${(this.disabled) ? "disabled" : "" }>' but therefore I get Uncaught TypeError: Cannot read property '1' of null

Am I doing something wrong, or isn't it possible at the moment?

Sorry I think this is the same Issue like #86 and can be closed!

[jmas]

@derappelt Hello, I did small test, here is: https://codepen.io/alex_maslakov/pen/dZOKPO
disabled=${props.disabled} is working for me.

[derappelt]

@jmas Because you are using lit-extended but I would like to use only lit-html itself.
With lit-extended: <input disabled="${false}"> generates <input> (what I want)
but with only lit-html: <input disabled="${false}"> generates <input disabled="false> (and is still disabled)

[jmas]

@derappelt I see. For now I don't know all differences between lit-html and lit-extended. So I just using a lit-extended because there event handlers is working. Maybe you have reasons why you can't use lit-extended. I would like to hear about it.

[derappelt]

@jmas Oh I just want to stay as small and as close to the platform as possible thats the only reason. I just don't like to load code into my project that I don't use. #jqueryhater 😆
But maybe I've to take that little cost for now. By the way thanks. I din't know before, that it is working in lit-extended.
But I'm interested in why there is this difference.

[jmas]

@derappelt Also you should know about Tree shaking when in final bundle you have only code that doing some work (only functions that you imported into your application). I do not know details, sorry, but you can research that term (also how it working in webpack).

[derappelt]

@jmas Yes I know about that. But I like more the approach of thinking deeply about what goes into my projects, than throwing stuff in that I din't use and letting a program cleanup after me. Sometime you may not avoid this. But when I can, I do.

[justinfagnani]

Hey @derappelt, I'm getting back to issues after some time off. Thanks for you patience.

@jmas is correct here. lit-html.js doesn't set properties, only attributes. It's meant to be as unopinionated and close to HTML syntax and semantics as possible. lit-extended allows for declarative property setting and event handlers. If you want to set the disabled property instead of the disabled attribute, you'll need to use lit-extended.

lit-extended is not very big, just 600b or so gzipped, and it probably what most people should be using. I need to document that better, and maybe choose a better name.

I'm going to close this now as having an answer, but feel free to ping me if you have more questions.

[Bastardly]

In lit-html ?disabled=${disabled} should do the trick.

[innerop]

@justinfagnani

Not clear what the difference is between props and attributes. Is that anywhere in the docs?

ifDefined doesn't work with "disabled" ... I wanted to remove the disabled attribute altogether if some value is undefined (or false) but it did not work. The problem is somehow even if disabled=false the event handler I added with addEventListener on the element itself won't fire.

I have not seen any docs referring to the syntax @Bastardly has shown. Using ?disabled=${disabled} is fine for me as long as it removes disabled from the element and the event gets triggered.

A bit of weirdness to have both ifDefined and ?prop .... or I'm not getting it.

Thanks,

[justinfagnani]

@innerop attributes are DOM attributes, like "class" in <div class="foo">. Properties are JS property, like p in obj.p = 2;.

This issue is pretty old, and at the time the core lit-html library only set attributes on element, not properties - that ability was left up to a library called lit-extended that no longer exists. Since then there's been some big changes and lit-html can set attributes:

html`<div class=${c}></div>`

properties

html`<my-element myProp=${p}></my-element>`

I'm not sure what's happening with isDefined but it seems like a different issue than this. Can you open a new issue?

[innerop]

I see @justinfagnani Props have to do with properties on custom elements. Makes sense.

I did find the part in the docs that mention the "?" attribute modifier and it works well for me. Having said that, I had no luck with ifDefined when using with a button's disabled attribute.

Same issue as described by OP in latest lit-html:

Neither of these worked

But this did work:

I'm happy to keep using the "?" modifier as it's more concise than ifDefined