You can use your element's properties in its template. LitElement automatically updates your element when its properties change.

Starting code


{% include projects/try/properties/before/my-element.js %}

{% include project.html folder="try/properties/before" openFile="my-element.js" %}

Editing steps

To create properties and use them in an element template:

  • Declare your properties.


    js static get properties(){ return { // Declare property here. }; }

    Declare a property

    js message: { type: String }

  • Initialize property values in the element constructor.


    js constructor(){ super(); // Initialize property here. }

    Initialize the property

    js message: { type: String }

  • Add properties to your template with JavaScript expressions.


    js render(){ return html` <!-- Add property here. --> <p></p> `; }

    Use the property

    js <p>${this.message}</p>

Completed code


{% include projects/try/properties/after/my-element.js %}

{% include project.html folder="try/properties/after" openFile="my-element.js" %}

{% include prevnext.html prevurl="use" prevtitle="Use your element in a web page" nexturl="expressions" nexttitle="Loops and conditionals" %}