Recently I tried to create a simple greeter component with an input that greets the person the user inputs. I used Typescript.

Bascially,

function myComponent(whom: string) {
    return html`Hello <input on-input=${() => updateWhom}>  ${whom}!`;
}

Where "updateWhom“ just re-renders the component with the new name

function updateWhom(e: Event) {
    let target = e.target as HTMLInputElement;
    render(myComponent(target.value), app);
}

I bundled the application using webpack and on modern browsers, it works as intended - when a user types "Bob" into the input, "Hello Bob!" is output.

Now, changing tsconfig’s "target“ from "es2015“ to "es5“ for browser compatibility changes the behavior of the application.

Whenever the user inputs something into the input, the input element loses focus after every keystroke. The greeter text still gets updated to the single character that was typed.
It seems this is because the entire Component, including the input element, gets completely recreated

Possible Explanation

The typescript compiler compiles the "myComponent“ method to

function myComponent(whom) {
return (_a = ["Hello <input on-input=", ">  ", "!"], _a.raw = ["Hello <input on-input=", ">  ", "!"], html(_a, function () { return updateWhom; }, whom));
var _a;
}

While this is correct and will call the "html" function with the same arguments as a tagged template would, it will create a new strings array (_a) on each call to "myComponent".

This breaks the "html" function, because it looks up the strings array in a Map:

function html(strings, ...values) {
    let template = templates.get(strings);
    if (template === undefined) {
        template = new Template(strings);
        templates.set(strings, template);
    }
    return new TemplateResult(template, values);
}

With real tagged templates, the "strings" parameter will always refer to the same array, so that in subsequent calls to the "html" function with the same tagged template, "strings" will be found in the map and so the Template that's saved in the map gets used as intended.

But in the compiled code, a different array gets passed in "strings" every time that just happens to have the sme content, so the template is never found in the map and a new template has to be created every time that destroys the old HTML elements.

I'd say this isn't really lit-html's fault, but Typescript's.
They should probably instead compile it like

var _tmp = ["Hello <input on-input=", ">  ", "!"];
_tmp.raw = _tmp.splice;

function myComponent(whom) {
    return html(_tmp, function () { return updateWhom; }, whom);
}

(or similar) so the same exact arrays are reused, just like they are with tagged templates.

Babel actually handles this correctly:

var _templateObject = _taggedTemplateLiteral(["Hello <input on-input=", ">  ", "!"], ["Hello <input on-input=", ">  ", "!"]);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function myComponent(whom) {
    return html(_templateObject, function () {
        return updateWhom;
    }, whom);
}