Set an Uppercase JavaScript Property Via an HTML Attribute

Lightning Web Components provides special syntax to allow you to set an uppercase JavaScript property via an HTML attribute. Previously, you couldn’t set an uppercase JavaScript property via an HTML attribute.

Where: This change applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

Why: HTML attributes in a template can't contain uppercase characters. If a JavaScript property name starts with an uppercase character, this syntax allows you to set the property in HTML without changing the JavaScript code.

How: Add a leading hyphen to the HTML attribute. The leading hyphen tells the engine that the first alpha character in the attribute name is declared with an uppercase character in the JavaScript class.

The JavaScript property Upper maps to the HTML attribute -upper.
// child.js
import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api Upper;
}
<!-- parent.html -->
<template>
    <c-child -upper="Some Value"></c-child>
</template>

In a Lightning web component, camel-case JavaScript property names map to kebab-case HTML attribute names. In JavaScript, @api firstName maps to the HTML <c-child first-name="Pierre"></c-child>. If a JavaScript property starts with an uppercase alpha character, @api FirstName, simply use the same mapping for the first character, -first-name.

<!-- parent.html -->
<template>
    <c-child -first-name="Pierre"></c-child>
</template>
// child.js
import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api FirstName;
}
<!-- child.html -->
<template>
    First Name:  {FirstName}
</template>