Setting property from outside not calling render

[bennypowers]

Setting a property from outside via assignment operator doesn't seem to be calling render

import {LitElement, html} from './node_modules/lit-html-element/lit-element.js';

class TtcFtw extends LitElement {
  static get is() {return 'ttc-ftw';}
  static get properties() {
    return {
      stationName: {
        type: String,
      },
    };
  }

  render() {
    return html`<h1>${this.stationName}</h1>`;
  }
}

customElements.define(TtcFtw.is, TtcFtw)

Works:

<input id="input" type="text" name="stationName" placeholder="Enter Station Name"/>
<ttc-ftw id="ttc"></ttc-ftw>
<script>
  input.onkeyup = event => {
    ttc.stationName = event.target.value;
    ttc.invalidate();
  }
</script>

Doesn't work:

<input id="input" type="text" name="stationName" placeholder="Enter Station Name"/>
<ttc-ftw id="ttc"></ttc-ftw>
<script>
  input.onkeyup = event => ttc.stationName = event.target.value;
    // ttc.setAttribute('station-name', event.target.value); also doesn't

</script>

README.md Advanced section says that setting properties will cause a render. Please clarify in docs how that works. Cheers! 🍻

[kenchris]

You need to call withProperties() when registering

customElements.define(TtcFtw.is, TtcFtw) should be customElements.define(TtcFtw.is, TtcFtw.withProperties())

Can you try that?

You can also call withProperties any time before or after define - but it needs to be called once before the properties will work as expected

[bennypowers]

Ok saw that now. didn't notice in the docs. You might want to put a link in the advanced section for readers like me that try to skip to the juicy bits 😉

Side note, polymer-ide complains 'unable to evaluate this expression down to a class reference' when I call that method in the definition. Might be able to solve that with jsdoc tags.

Thanks again.

[kenchris]

Feel free to submit PRs to improve the docs or generate jsdocs from the TS files