Lit-html: lit-extended - dynamic CSS classes aren't working

[cbelden]

Dynamic/bound CSS class attributes don't seem to work with lit-extended. For example, the following template doesn't render any value to the div's CSS class attribute:

import { html, render } from 'lit-html/lib/lit-extended'

const container = document.getElementById('app')

const hello = () => {
  const onclick = () => console.log('neat!');
  const secs = Math.floor(Date.now() / 1000);
  return html`
    <style>
      .title.bold {
        font-weight: bold;  
      }
    </style>
    <div class="${secs % 2 ? 'title bold': 'title'}" on-click=${onclick}>
      Wooweeeooo
    </div>
  `;
};

setInterval(() => render(hello(), container), 1000);

Full example here: https://potent-steel.glitch.me

Am I goofing something up? Are lit-html and lit-html/lib/lit-extended interchangeable? Can I import lit-html in some modules, and lit-html/lib/lit-extended elsewhere?

[pshihn]

When setting an attribute (like class), one needs to use $= when assigning it in the template. See: https://github.com/Polymer/lit-html/blob/master/src/lib/lit-extended.ts#L42

<div class$="${className}"></div>

[cbelden]

Oh ok cool, thank you!

Why is the API different? Can close this bug, but as a newcomer, this was confusing.

[obedm503]

it's different to distinguish between attributes and properties. HTMLElement does not have a class property, it has className. so, you could not use the $= syntax, but you would have to use className instead of class

[justinfagnani]

I think the question at hand has been answered, but this speaks to an issue we've seen a few times around the different semantics of lit-html and lit-extended.

We're considering making lit-extended a more strict superset of lit-html, such as requiring an opt-in to property bindings, vs opting into attribute bindings. This would look something like:

html`<x-foo .bar=${baz}></x-foo>`

where the . indicates a property binding.