How to use arrow function in Polymer/lit-element project

Question

I'm learning Polymer/lit-element and trying to build a really simple demo project. I'm trying to use es6 arrow function inside the class (getButtonStyle function), but it returns me this error

SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties'

How to use arrow function in lit-element project? What am I missing? Thanks!

I've tried install some babel extension packages and setup plugins in .babelrc, but it didn't work (for sure, because it's not using babel). also tried to Google it, but didn't see anyone has the same issue.

import { html, LitElement } from "lit-element";

class ButtonDemo extends LitElement {
  constructor() {
    super();
    this.text = "Button";
    this.disabled = false;
    this.ready = false;
  }

  static get properties() {
    return {
      disabled: {
        type: Boolean
      },
      ready: {
        type: Boolean
      }
    };
  }

  getButtonStyle = (disabled, ready) => {
    if (!disabled) return "";

    var styles = "disabled ";
    styles += ready ? "saving" : "incomplete";
    return styles;
  };

  render() {
    return html`
      <style>
        button {
          //some style
        }
        button.disabled.saving {
          //some style
        }
        button.disabled.incomplete {
          //some style
        }
      </style>
      <button
        class="${this.getButtonStyle(this.disabled, this.ready)}"
        ?disabled="${this.disabled}"
      >
        My Button
      </button>
    `;
  }
}

window.customElements.define("button-demo", ButtonDemo);

any thoughts will be appreciated. Thank you.

Remember to declare all of the properties that you want LitElement to manage. https://lit-element.polymer-project.org/guide/properties — Cappittall, Jan 24 '19 at 08:16

Cappittall · Answer 1 · 2019-01-24T10:49:13.750

At polymer, you can't define the variable as you defined, so move ie. into constructor:

Demo

  static get properties() {
    return {
      disabled: {
        type: Boolean
      },
      ready: {
        type: Boolean
      },
      getButtonStyle: {
        type: Object
      }

    };
  }

constructor() {
    super();
    this.text = "Button";
    this.disabled = false;
    this.ready = false;
    this.getButtonStyle = (disabled, ready) => {
           if (!disabled) return "";

           var styles = "disabled ";
           styles += ready ? "saving" : "incomplete";
           return styles;
    };
  }

For testing, as you defined disabled=false so, functions will return empty String. "" In order to effect style, you will need to set disable true.

score 0 · Answer 2 · answered Feb 14 '19 at 11:54

You can move the arrow function declaration to the module scope.

I.e. move

getButtonStyle = (disabled, ready) => {
    if (!disabled) return "";

    var styles = "disabled ";
    styles += ready ? "saving" : "incomplete";
    return styles;
  };

out of the class declaration. You can then call it directly by name without this.

score 0 · Answer 3 · answered Feb 28 '19 at 11:30

This is completely unrelated to lit-element. This syntax is not yet supported by all browsers, this is why you get the babel warning.

This feature was shipped in Chrome 72 (https://www.chromestatus.com/feature/6001727933251584) so if you don't use babel you can use it there without a problem.

If you do use babel, you will need to install the syntax plugin as mentioned by the warning. There should be a lot of babel guides out there to help you.

How to use arrow function in Polymer/lit-element project

3 Answers3