Lit-html: Conditional attributes

[Christian24]

Hi,

I think this is not really related to #56. I have a custom element which defines a placeholder attribute. It works like this:

<rhm-combo-box
            id="group"
            @select="${this.onSelectDepartment.bind(this)}"
            .value="${this.selectedDepartmentItem}"
            .items="${this.departmentComboBoxItems}"
            placeholder="Group"
          ></rhm-combo-box>

However, I only want to set placeholderif a certain condition is met. So I came up with something like this:

<rhm-combo-box
            id="group"
            @select="${this.onSelectDepartment.bind(this)}"
            .value="${this.selectedDepartmentItem}"
            .items="${this.departmentComboBoxItems}"
           ${this.departmentComboBoxItems.length > 1 ? html`placeholder="Group"` : ``} 
          ></rhm-combo-box>

However, this ends with TypeError: Cannot read property '2' of null in template.ts line 88. Same if I return null instead of an empty string. Returning html`does not do the trick either. I have also tried this with thewhen` directive, but that also does not work.

Is this even possible?

Thanks a lot in advance.

[MaxRoecker]

I think it is not possible to set conditional non-boolean attributes. A boolean attribute can be set with the ? notation right before the attribute's name. Ex:

const isChecked = true;
html`<input type="checkbox" ?checked=${isChecked} />`

In your case, can you set the placeholder attribute to empty string? Something like this:

<rhm-combo-box
  id="group"
  @select="${this.onSelectDepartment.bind(this)}"
  .value="${this.selectedDepartmentItem}"
  .items="${this.departmentComboBoxItems}"
  placeholder="${this.departmentComboBoxItems.length > 1 ? 'Group' : ''}">
</rhm-combo-box>

[jsilvermist]

Not 💯 sure on this and on phone atm so I can't really check it out easily but, would something like this work?

import { ifDefined } from 'lit-html/directives/if-defined.js';

```
...

```html
<rhm-combo-box
    id="group"
    @select="${this.onSelectDepartment.bind(this)}"
    .value="${this.selectedDepartmentItem}"
    .items="${this.departmentComboBoxItems}"
    placeholder="${ifDefined(this.departmentComboBoxItems.length > 1 ? 'Group' : undefined)}"
></rhm-combo-box>

[mariusGundersen]

You can use the if Defined directive to do that.

Ah, I was too slow checking the source code! 🏆@jsilvermist!

[Christian24]

Thanks a lot I went with @jsilvermist's solution. That works perfectly.