lit-html : is there a way to force re-render of a template?

Question

I have been using as lit-html in my own custom web-component library. I have third party webcompobent :

html`<lottie-player src=${state.url}  background="transparent"  speed="1"  style="width: 100%; height: 100%;"  loop  autoplay></lottie-player>`

This third party components do not updates itself whenever src attribute is changed on it. I understand, they have not designed it as such.

Is there a way to force lit-html to re-render this, as when I chnage the state.url, instead of deleting old node and creating new one, lit-html keep the same node intact and changes only its attribute.

If there a way to force re-render for this specific template each time ?

Are you using `lit-html` with `LitElement`? You could use `this.requestUpdate()` if so. — pietrorea, Feb 04 '22 at 03:49
@pietrorea No I am not using LitElement. I am working with a custom lib on made on top of `lit-html`. — Anurag Vohra, Feb 05 '22 at 08:44

Anurag Vohra · Answer 1 · 2021-08-12T12:29:18.813

0

Ok, so I solved this issue by :

let b = `<lottie-player src=${state.url}  background="transparent"  speed="1"  style="width: 100%; height: 100%;"  loop  autoplay></lottie-player>`;
t = html`${unsafeHTML(b)}`;

Concept: B is a string using plain template string. Then then use unsafeHTML directive to create a re-render it!

If any one has any better solution, will be glad to read it too.

edited Aug 12 '21 at 12:29

answered Aug 12 '21 at 04:07

Anurag Vohra

1,781
12
28

lit-html : is there a way to force re-render of a template?

1 Answers1