LitElement - How to create dom-if restamp behavior with javascript if expression inside LitElement render method?

Question

We are using "if" expression inside LitElement to selectively render content in render method and would like to re-create child DOM every time "if" expression get re-evaluated(changes). This is something similar to what dom-if element used to support with "restamp" property in polymer 3.

Really appreciate any pointers here to follow?

Thanks, Vishal

Doesn't it do that by default? I think you have to use cache (https://lit-html.polymer-project.org/guide/template-reference#cache) to get the other behavior. — Trevor Dixon, Mar 20 '19 at 10:17
Also https://lit-html.polymer-project.org/guide/writing-templates#caching-template-results-the-cache-directive — Trevor Dixon, Mar 20 '19 at 10:27

score 1 · Answer 1 · answered Apr 01 '19 at 10:57

You have 2 options depending on whether the condition will change several times and you want to cache the represented parts or not:

Without cache (vanilla javascript)

render() {
  return html`${
    condition ?
    () => html`Your TRUE HTML here` :
    () => html`Your FALSE HTML here`
  }`;
}

With cache (using cache directive from lit-html)

import { cache } from 'lit-html/directives/cache';
[…]
render() {
  return html`${cache(
    condition ?
    () => html`Your TRUE HTML here` :
    () => html`Your FALSE HTML here`
  )}`;
}

score 1 · Answer 2 · answered Aug 29 '19 at 08:04

1

Try this:

    render() {
      return html`${
        condition ? html`<p>Hello</p>` : ''
      }`;
    }

answered Aug 29 '19 at 08:04

Marco Monzón

51
4

LitElement - How to create dom-if restamp behavior with javascript if expression inside LitElement render method?

2 Answers2