Polymer 3 lit-html example

[Ronn Ross]

Greetings,

I'm attempting to create a small polymer 3 lit-html project. I'm getting hung up when lit-html enters the picture. I followed this tutorial: 

https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview

and was able to get the demo project running locally. Then I felt inspired and imported lit-html and tried to convert it over. Here is what I have

import { Element as PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';

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

export class MyApp extends PolymerElement {

   constructor() {

       super();

       this.name = '3.0 preview';

   }

    static get properties() {

       name: {

           Type: String

       }

   }

   static get template() {

       return render(this.render());

   }

    render() {

       return html`

           <div>

               This is my ${name} app.

           </div>

       `;

   }

}

customElements.define('my-app', MyApp);

When I run the app it goes from working to 

Uncaught TypeError: this.render is not a function

Seems strange since it is a method on the class. I'm sure that I'm missing something obvious. Could someone please point me in the right direction? 

Thanks!

[Justin Fagnani]

The problem here is that `render()` is an instance method and you're trying to call it from a static method using `this`. You can't really use lit-html with the static template system that PolymerElement comes with. We've made a new base class called LitElement that includes the non-template parts of Polymer and adds lit-html integration: https://github.com/PolymerLabs/lit-element

 

Thanks!

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9cb1b757-8752-4317-98f2-b68f2465ef1e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ronn Ross]

Justin,

That worked. Thanks for the quick response. Is ready() a special method? Do you think lit-element will get long term support in polymer 3? 

Thanks!

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

[Justin Fagnani]

ready() is a Polymer-specific lifecycle callback that LitElement inherits.

LitElement is very likely to receive long-term support and be recommended for new components.

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6d16b912-4c5a-4822-961d-ec13ea94de5d%40googlegroups.com.