How do I assign a variable to a DOM Node created by lit-html

Question

I'm using lit-html to render html templates, but after they've rendered I need to assign a variable to a couple of nodes inside the template result. Currently, the only way I've found to do this is with a dirty timeout like this:

let myInput;
render(myTemplate(myData), myContainer);

setTimeout(() => {
    myInput = myContainer.querySelector(".myInput");
}, 0);

Is there a nicer way to do this? It would be awesome if there was a way to assign the variable within the template itself.

Thanks

score 0 · Answer 1 · answered Jun 16 '20 at 05:54

You can set properties on elements in your templates with the property binding syntax:

const myTemplate = (data) => html`<my-element .myProperty=${data.foo}></my-element>`;

See the docs here: https://lit-html.polymer-project.org/guide/writing-templates#bind-to-properties

Also, render() is synchronous, so even in cases where you do need to query the rendered DOM, you don't need setTimeout.

How do I assign a variable to a DOM Node created by lit-html

1 Answers1