Solution 1 :

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

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

See the docs here:

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

Problem :

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.