Starting code

my-element.js

{% 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.

  my-element.js

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

  Declare a property

  js message: { type: String }

• Initialize property values in the element constructor.

  my-element.js

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

  Initialize the property

  js message: { type: String }

• Add properties to your template with JavaScript expressions.

  my-element.js

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

  Use the property

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

Completed code

my-element.js

{% 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" %}