Purpose of the "$=" or "?=" in lit-element examples

Question

I'm having trouble understanding the use of ?= or $= these two examples:

First Example: Lit-Element README

<div id="box" class$="${this.uppercase ? 'uppercase' : ''}">
  <slot>Hello World</slot>
</div>

Second Example: PWA Example App

<div class="decorator" focused?="${_focused}">
  <slot id="inputSlot" name="input"></slot>
  <div class="underline"></div>
</div>

Why do these HTML attributes have a $ or ? suffix?

Answer 1

$ and ? suffixes appear to be deprecated versions of no prefix (attribute value binding) and ? prefix (boolean attribute binding), going by the source.

To set an attribute instead of a property, append a $ suffix to the attribute name.

Example:

html`<button class$="primary">Buy Now</button>`

⋮

@deprecated Please use /lit-html.js instead. lit-extended will be removed in a future version.

So you’ll want this now:

<div id="box" class="${this.uppercase ? 'uppercase' : ''}">
  <slot>Hello World</slot>
</div>

<div class="decorator" ?focused="${_focused}">
  <slot id="inputSlot" name="input"></slot>
  <div class="underline"></div>
</div>

’course, if that deprecated stuff is left in, who knows how relevant the rest of their contexts is.