Introduction to Properties

Variables in LWC (as you know them in Java, Python, etc.) are called Properties in LWC.

• Property naming convention in JavaScript is camelCase while HTML attribute names are in kebab-case (dash-separated) so:
  • A property named itemName maps to an HTML attribute called item-name.

Don’t start a property name with:

• on (for example, onClick)
• aria (for example, ariaDescribedby)
• data (for example, dataProperty)

And don’t use these reserved words for property names.

• slot
• part
• is

There are 3 types of properties in LWC:

• Private properties
• Tracked (private) properties using @track decorator
• Public Tracked properties using @api decorator

Private Properties

It is declared using only an identifier name and don’t need a datatype.

• They are only accessible in the component it is declared. Some people use a naming convention prefixing with an underscore _variable to indicate that is a private property.
• When accessing a variable in the template that is declared in the Javascript file, we call it Data Binding (binding the template with the Javascript).

This is a simple example:

<template>
  <lightning-card title="Greeting Message" icon-name="custom:custom14">
    <div class="slds-var-m-around_medium">
      <p>{greetingMessage}</p>
    </div>
  </lightning-card>
</template>