0

i have update version of polymer lit-element from 0.5.2 to 0.6.2 and the binding dosn't work what I wrong?

this the html: 

<html>
  <head>
     <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> 
   
    </head>
  <body>
 
    <my-element feeling="good"></my-element>
    <script type="module" src="./index.js"></script>
</body> 
</html>

with old version 0.5.2 the code below worked 

   import {LitElement, html} from '@polymer/lit-element';

    class MyElement extends LitElement {
        
    static get properties() {
        return {
          feeling:{type:String}
        }
      }

    
      
      _render({feeling}) {
        return html  `  i feel ${feeling}!`;
      }       


    }

    customElements.define('my-element', MyElement);

this with 0.6.2 :

import {LitElement, html} from '@polymer/lit-element';

    class MyElement extends LitElement {

      static get properties() {
        return {
          feeling:{type:String}
        }
      }
      render() {            
        return 
          html`  now i feel  ${this.feeling} !`;
      }       
    }

    customElements.define('my-element', MyElement);

I find that in version 0.6.2 is changed the function _render() to render() and for the proprerty if change in this.proprerty ..... but in render this.feeling is undefined....

can help me?

Angelotti
  • 673
  • 1
  • 6
  • 20
  • The new `lit-element` comes with new `lit-html`. The binding syntax was changed. See property binding in https://polymer.github.io/lit-html/guide/writing-templates#binding-types. – User 28 Nov 09 '18 at 06:02
  • thanks but i'm new in Polymer... and i don't understand how it works with property in polymer... if you look my code with version 0.6.2 ... can you help me and show me one exaple of code ? i tried to pass my variable at render(myvar) and us it inside ${myvar) but i dosn't work... what can I do? thanks – Angelotti Nov 09 '18 at 07:41
  • Sorry my bad, In your case it's already work just put `html` at the same line as `return` statement. – User 28 Nov 09 '18 at 11:24
  • I try but it didn't work – Angelotti Nov 12 '18 at 08:15
  • inside render() this.feeling is undefined... – Angelotti Nov 12 '18 at 08:25

1 Answers1

0

I am not sure what happend, but I delete the white-spaces before html... tag in render().

Now it works fine. It was IDE that warned me that line must be not running.

  render() {            
    return html`  now i feel  ${this.feeling} !`;
  }
程柏硯
  • 137
  • 1
  • 10