It’s important to remember that the purpose of template expressions is to help you write maintainable code. Keeping presentation-only expressions in the component template is a good way to do this, but not if your expressions are so complex you can’t read them. Use your best judgement for what works for you and your development team, both today, and six weeks after the last time you looked at your markup.
Additionally, while template expressions offer enhanced capabilities, certain limitations exist to maintain performance and security.
Complex template expressions are supported for components with API version 66.0 and later. Components with API versions before 66.0 in their js-meta.xml file don’t support complex expressions. Expression evaluation falls back to basic property binding. Attempting to use a complex expression on a component with a lower API version will result in compiler errors.
The this keyword isn’t allowed in template expressions.
1<!-- ❌ Invalid -->
2<div>{this.property}</div>
3<!-- Error: 'this' is not allowed in template expressions -->
4
5<!-- ✅ Valid - direct property access -->
6<div>{property}</div>1import { LightningElement } from "lwc";
2
3export default class ThisKeywordComponent extends LightningElement {
4 property = "value";
5}Only arrow functions are supported, not function declarations.
1<!-- ❌ Invalid -->
2<div>{function getName() { return 'John'; }()}</div>
3<!-- Error: Function declarations are not allowed in template expressions -->
4
5<!-- ✅ Valid -->
6<div>{(() => 'John')()}</div>Arrow functions with block bodies aren’t supported.
1<!-- ❌ Invalid -->
2<div>{items.map(item => { return item.name; })}</div>
3<!-- Error: Arrow functions with block bodies are not allowed -->
4
5<!-- ✅ Valid -->
6<div>{items.map(item => item.name)}</div>1import { LightningElement } from "lwc";
2
3export default class BlockBodyComponent extends LightningElement {
4 items = [{ name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" }];
5}Async arrow functions aren’t supported.
1<!-- ❌ Invalid -->
2<div>{async () => await fetchData()}</div>
3
4<!-- ✅ Use component methods instead -->
5<div>{asyncData}</div>1import { LightningElement } from "lwc";
2
3export default class AsyncArrowComponent extends LightningElement {
4 asyncData = "Loading...";
5
6 connectedCallback() {
7 this.loadData();
8 }
9
10 async loadData() {
11 this.asyncData = await this.fetchData();
12 }
13
14 async fetchData() {
15 // Simulate async operation
16 return "Data loaded";
17 }
18}Asynchronous operations aren’t supported in template expressions.
1<!-- ❌ Invalid -->
2<div>{await fetchData()}</div>
3
4<!-- ✅ Use component methods instead -->
5<div>{asyncData}</div>1import { LightningElement } from "lwc";
2
3export default class AwaitComponent extends LightningElement {
4 asyncData = "Loading...";
5
6 connectedCallback() {
7 this.loadData();
8 }
9
10 async loadData() {
11 this.asyncData = await this.fetchData();
12 }
13
14 async fetchData() {
15 // Simulate async operation
16 return "Data loaded";
17 }
18}Assignment operators aren’t allowed outside of arrow functions.
1<!-- ❌ Invalid -->
2<div>{count = count + 1}</div>
3<!-- Error: Assignment operators are not allowed outside arrow functions -->
4<button>{count += 1}</button>
5<!-- Error: Assignment operators are not allowed outside arrow functions -->Update operators (++, --) aren’t allowed outside of arrow functions.
1<!-- ❌ Invalid -->
2<div>{count++}</div>
3<!-- Error: Update operators are not allowed outside arrow functions -->
4<button onclick="{foo++}"></button>
5<!-- Error: Update operators are not allowed outside arrow functions -->The new operator isn’t supported for creating instances.
1<!-- ❌ Invalid -->
2<div>{new Date()}</div>
3<!-- Error: 'new' operator is not allowed in template expressions -->
4<button onclick="{() => new Day()}">Set Day</button>
5<!-- Error: 'new' operator is not allowed in template expressions -->
6
7<!-- ✅ Use component methods instead -->
8<div>{currentDate}</div>1import { LightningElement } from "lwc";
2
3export default class NewOperatorComponent extends LightningElement {
4 currentDate = new Date().toLocaleDateString();
5}The delete operator isn’t supported.
1<!-- ❌ Invalid (Use component methods instead) -->
2<button onclick="{() => delete baz}"></button>Throw statements aren’t supported in template expressions.
1<!-- ❌ Invalid -->
2<button onclick="{() => throw 'oh no!'}"></button>
3
4<!-- ✅ Use component methods instead -->
5<button onclick="{handleError}">Handle Error</button>1import { LightningElement } from "lwc";
2
3export default class ThrowComponent extends LightningElement {
4 handleError = () => {
5 try {
6 throw new Error("oh no!");
7 } catch (error) {
8 console.error(error.message);
9 }
10 };
11}Yield expressions aren’t supported.
1<!-- ❌ Invalid -->
2<div>{yield bar}</div>
3
4<!-- ✅ Use component methods instead -->
5<div>{generatedValue}</div>1import { LightningElement } from "lwc";
2
3export default class YieldComponent extends LightningElement {
4 bar = "value";
5 generatedValue = "computed value";
6}The super keyword isn’t supported.
1<!-- ❌ Invalid -->
2<button onclick="{super('duper')}"></button>Import statements aren’t supported in template expressions.
1<!-- ❌ Invalid -->
2<button onclick="{() => import('foo').then(doThingWithFoo)}"></button>The import.meta object isn’t supported.
1<!-- ❌ Invalid -->
2<button onclick="{() => doThing(import.meta.env.SSR)}"></button>Class expressions aren’t supported.
1<!-- ❌ Invalid -->
2<div>{class Bar { method() {} }}</div>Regular expression literals aren’t supported.
1<!-- ❌ Invalid -->
2<div>{/wannabe/g}</div>
3
4<!-- ✅ Use component properties instead -->
5<div>{regexPattern}</div>1import { LightningElement } from "lwc";
2
3export default class RegexComponent extends LightningElement {
4 regexPattern = /wannabe/g;
5}BigInt literals aren’t supported.
1<!-- ❌ Invalid -->
2<div>{1n}</div>
3<div>{transformBigInt(1n)}</div>
4
5<!-- ✅ Use component methods instead -->
6<div>{bigIntValue}</div>1import { LightningElement } from "lwc";
2
3export default class BigIntComponent extends LightningElement {
4 bigIntValue = BigInt(1).toString();
5
6 transformBigInt(value) {
7 return value.toString();
8 }
9}Comments aren’t allowed inside template expressions.
1<!-- ❌ Invalid -->
2<div>{/* what do you think ? */ someValue}</div>The comma operator isn’t supported.
1<!-- ❌ Invalid -->
2<button onclick="{(one(), two(), three())}"></button>
3
4<!-- ✅ Use component methods instead -->
5<button onclick="{executeSequence}">Execute Sequence</button>1import { LightningElement } from "lwc";
2
3export default class CommaOperatorComponent extends LightningElement {
4 executeSequence = () => {
5 this.one();
6 this.two();
7 this.three();
8 };
9
10 one() {
11 alert("one");
12 }
13 two() {
14 alert("two");
15 }
16 three() {
17 alert("three");
18 }
19}Template expressions in attributes must be quoted. Using unquoted template expressions will result in compilation or runtime errors.
1<!-- ❌ Error: Complex expression without quotes -->
2<div class={isActive ? 'active' : 'inactive'}></div>
3<!-- Error: Template syntax error: Expected quoted attribute value -->
4
5<!-- ❌ Error: Function call without quotes -->
6<button onclick={handleClick()}>Click me</button>
7<!-- Error: Template syntax error: Expected quoted attribute value -->
8
9<!-- ❌ Error: Method call without quotes -->
10<input value={user?.getName() ?? 'Enter name'}>
11<!-- Error: Template syntax error: Expected quoted attribute value -->
12
13<!-- ✅ Valid - quoted complex expressions -->
14<div class="{isActive ? 'active' : 'inactive'}"></div>
15<button onclick="{handleClick}">Click me</button>
16<input value="{user?.getName() ?? 'Enter name'}">1import { LightningElement } from "lwc";
2
3export default class QuotingErrorsComponent extends LightningElement {
4 isActive = true;
5 user = {
6 getName() {
7 return "John Doe";
8 },
9 };
10
11 handleClick() {
12 console.log("Clicked");
13 }
14}Release Preview
j