5

I'm not talking about boolean attributes, attributes like class if you don't want to add an empty class attribute if there's no CSS class.

html`<span class=${hasClass ? 'my-class' : ''}></span>`
dork
  • 4,396
  • 2
  • 28
  • 56

1 Answers1

10

There is an ifDefined directive that does what you want. If the value is undefined the attribute won't be rendered.

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

html`<span class=${ifDefined(hasClass ? 'my-class' : undefined)}></span>`
Brad
  • 159,648
  • 54
  • 349
  • 530
abraham
  • 46,583
  • 10
  • 100
  • 152