Considerations and Limitations

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 is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer’s sole discretion.

Note

Do not use complex template expressions in production. Use complex template expressions only for:

Development and testing
Proof of concept implementations
Internal tools and prototypes
Learning and experimentation

If you need similar functionality in production, use traditional approaches like getters, computed properties, or component methods until the feature is generally available.

Important

Version Requirement

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.

this Keyword

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}

Function Declarations

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>

Block Body Arrow Functions

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

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}

Await Expressions

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 Operations Outside Arrow Functions

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 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 -->

New Operator

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}

Delete Operator

The delete operator isn’t supported.

1<!-- ❌ Invalid (Use component methods instead) -->
2<button onclick="{() => delete baz}"></button>

Throw Statements

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

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}

Super Keyword

The super keyword isn’t supported.

1<!-- ❌ Invalid -->
2<button onclick="{super('duper')}"></button>

Import Statements

Import statements aren’t supported in template expressions.

1<!-- ❌ Invalid -->
2<button onclick="{() => import('foo').then(doThingWithFoo)}"></button>

Import.meta

The import.meta object isn’t supported.

1<!-- ❌ Invalid -->
2<button onclick="{() => doThing(import.meta.env.SSR)}"></button>

Class Expressions

Class expressions aren’t supported.

1<!-- ❌ Invalid -->
2<div>{class Bar { method() {} }}</div>

Regular Expression Literals

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

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 Inside Expressions

Comments aren’t allowed inside template expressions.

1<!-- ❌ Invalid -->
2<div>{/* what do you think ? */ someValue}</div>

Comma Operator

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}

Unquoted Expressions in Attributes

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}