Expressions must be compatible with HTML syntax because they are parsed as HTML. Certain characters have special meaning in HTML and can’t be used directly in expressions.
Important
Expressions must be HTML compliant because they are parsed as HTML. The < character in a text node expression would be interpreted as the opening of an HTML tag, causing a parsing error. However, < is allowed in attribute expressions when properly quoted. This applies to all characters that carry a special meaning in HTML. Caution against being too clever, and thorough testing, is recommended.
1<!-- ❌ Invalid - < character causes HTML parsing issues in text nodes -->
2<div>{foo < bar}</div>
3<div>{age < 18 ? 'Minor' : 'Adult'}</div>
4
5<!-- ✅ Valid - use HTML-compliant equivalents in text nodes -->
6<div>{bar > foo}</div>
7<div>{age >= 18 ? 'Adult' : 'Minor'}</div>
8
9<!-- ✅ Valid - < character works in quoted attributes -->
10<div class="{bar > foo ? 'high' : 'low'}"></div>
11<input min="{minValue}" max="{maxValue}" />1import { LightningElement } from "lwc";
2
3export default class HtmlComplianceComponent extends LightningElement {
4 foo = 5;
5 bar = 10;
6 age = 20;
7 minValue = 0;
8 maxValue = 100;
9}{bar > foo} instead of {foo < bar}{bar >= foo} instead of {foo <= bar}< character works when expressions are quoted in attributes, but doesn’t work in text nodes< followed by text that could be interpreted as HTML tagsComplex template expressions in attributes must be quoted. This requirement is backward compatible with existing LWC templates — simple property bindings don’t require quotes.
1<!-- ✅ Valid - complex expressions must be quoted -->
2<div class="{isActive ? 'active' : 'inactive'}"></div>
3<input value="{user?.name ?? 'Enter name'}">
4<button onclick="{() => handleClick()}">Click me</button>
5<div data-value="{bar > foo ? 'high' : 'low'}"></div>
6
7<!-- ✅ Valid - simple property bindings don't need quotes -->
8<div class={simpleClass}></div>
9<input value={simpleValue}>
10<button onclick={simpleHandler}>Click me</button>
11
12<!-- ❌ Invalid - complex expressions without quotes -->
13<div class={isActive ? 'active' : 'inactive'}></div>
14<button onclick={() => handleClick()}>Click me</button>
15<div data-value={bar > foo ? 'high' : 'low'}></div>{value})HTML entities are not decoded in expressions:
1<!-- ❌ HTML entities not decoded -->
2<div>{'Price < $100'}</div>
3
4<!-- ❌ Use proper characters (but be mindful of HTML compliance as the below example would not work) -->
5<div>{'Price < $100'}</div>
6
7<!-- ✅ Better - use HTML-compliant expressions -->
8<div>{'Price under $100'}</div>
9<div>{price >= 100 ? 'Over $100' : 'Under $100'}</div>1import { LightningElement } from "lwc";
2
3export default class HtmlEntitiesComponent extends LightningElement {
4 price = 99;
5}Certain expressions can cause HTML parsing issues when they contain characters that have special meaning in HTML:
1<!-- ❌ Invalid - A double quoted string that contains HTML-like content would produce invalid results -->
2<div>{() => foo("}<c-status></c-status>")}</div>
3<div attr="{() => call("><c-status></c-status>")}"></div>
4
5<!-- ✅ Valid - avoid expressions that could be interpreted as HTML, for example by using single quotes in attribute expressions -->
6<div>{() => foo('status')}</div>
7<div attr="{() => call('status')}"></div>1import { LightningElement } from "lwc";
2
3export default class HtmlParsingComponent extends LightningElement {
4 foo(value) {
5 return `Processed: ${value}`;
6 }
7
8 call(value) {
9 return `Called with: ${value}`;
10 }
11}Avoid expressions that:
< followed by text that could be interpreted as an HTML tag</ followed by text that could be interpreted as a closing HTML tag
j