Testing out with start-polymer3

[ZempTime]

Hey! I've repurposed the start-polymer3 codebase and am trying to drop in lit-element.

What's the suggested way to bind the checked state of paper-checkbox with marsfarm-app's pie property?

import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { LitElement, html } from '@polymer/lit-element/lit-element.js';
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
import '@polymer/polymer/lib/elements/dom-if.js';
import '@polymer/paper-checkbox/paper-checkbox.js';

class MarsfarmApp extends LitElement {
  static get properties () {
    return {
      message: {
        type: String,
        value: ''
      },
      pie: {
        type: Boolean,
        value: false,
        observer: 'togglePie'
      },
      loadComplete: {
        type: Boolean,
        value: false
      }
    };
  }

  constructor() {
    // If you override the constructor, always call the 
    // superconstructor first.
    super();
    this.message = 'Hello World! I\'m a Polymer element :)';
  }

  ready(){
    // If you override ready, always call super.ready() first.
    super.ready();
    // Output the custom element's HTML tag to the browser console.
    // Open your browser's developer tools to view the output.
    console.log(this.tagName);
  }
  
  togglePie(){
    if(this.pie && !this.loadComplete) {
      // See https://developers.google.com/web/updates/2017/11/dynamic-import
      import('./lazy-element.js').then((LazyElement) => {
        console.log("LazyElement loaded");
      }).catch((reason) => {
        console.log("LazyElement failed to load", reason);
      });
      this.loadComplete = true;
    }
  }

  render() {
    return html`
      <h1>Start Polymer 3.0</h1>
      <p>${this.message}</p>
      <paper-checkbox 
        checked="{{pie}}">I like pie.</paper-checkbox>
      <template is="dom-if" if="${this.pie}">
        <lazy-element><p>lazy loading...</p></lazy-element>
      </template>
    `;
  }

}

// Register the element with the browser.
customElements.define('marsfarm-app', MarsfarmApp);

[edit: added syntax highlighting]

[ZempTime]

aha! this is exactly what I was wondering. Given that I originally came from react land, I'm down with this approah.

#14

[ZempTime]

When first using a new tool, I suspend my disbelief about how things should work, so I can see how they actually work. In this case, I'd assumed polymer's data-binding would be present, and attributed any of it not working to my own lack of understanding. So, given I'm the second person to pipe up with the same question, I'd like to suggest adding a small note to the readme to help nudge others down the right path.

Heads Up!

• Polymer 1/2 users - lit-element doesn't support Polymer-esque data-binding ([[]] & {{}}) for performance compatibility reasons. (You can use lit-element with anything). Instead, use standard browser events. see 2 way data binding not working #14 for details.

then, for easy copypasta if you choose:

## Heads Up!
* Polymer 1/2 users - `lit-element` doesn't support Polymer-esque data-binding (`[[]]` & `{{}}`) for performance compatibility reasons. (You can use `lit-element` with anything). Instead, use standard browser events. see https://github.com/PolymerLabs/lit-element/issues/14 for details.