switch statements to render conditional content.
Conditionals with the conditional (ternary) operatorPermalink to “Conditionals with the conditional (ternary) operator”
Ternary expressions with the conditional operator,
?, are a great way to add inline conditionals:
Conditionals with if statementsPermalink to “Conditionals with if statements”
You can express conditional logic with if statements outside of a template to compute values to use inside of the template:
Alternately, you can factor logic into a separate function to simplify your template:
Caching template results: the cache directivePermalink to “Caching template results: the cache directive”
In this case, you can use the
cache directive. The cache directive caches DOM for templates that aren't being rendered currently.
See the cache directive for more information.
Conditionally rendering nothingPermalink to “Conditionally rendering nothing”
Sometimes, you may want to render nothing in one branch of a conditional operator. This is commonly needed for child expressions and also sometimes needed in attribute expressions.
For child expressions, the values
null, the empty string (
''), and Lit's nothing sentinel value all render no nodes. See Removing child content for more information.
This example renders a value if it exists, and otherwise renders nothing:
For attribute expressions, Lit's nothing sentinel value removes the attribute. See Removing an attribute for more information.
This example conditionally renders the