I am currently exploring Polymer/lit-element and attempting to create a simple demo project. I have been trying to incorporate an ES6 arrow function within the class (specifically, the getButtonStyle function), but encountered the following error:
SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties'
How can I properly use an arrow function in a lit-element project? What am I overlooking? Thank you for any guidance!
I have experimented with installing various Babel extension packages and configuring plugins in .babelrc, but without success (as it seems that it's not utilizing Babel). Additionally, I attempted to search online for solutions but did not find anyone facing 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 insights or suggestions are welcome. Thank you.