lit-element without webcomponent

[mustafaekim]

Hi,

I was trying to implement something similar but without webcomponents. A simple function that renders some templateResult, having its own variables and functions.. I came up with a function like this

dummy.component.js:

import { html } from 'lit-html';
export default function dummyComponent(updateHandler) {
    console.log("Dummy componenting...");

    var counter = 0;

    function increment(){
        console.log("incrementing..")
        counter++;

        updateHandler();
    }

    var templateResult = html`
        Hello ${name}, I am dummy @ ${counter}
        <button type="button" onclick="${()=>{increment()}}">Increment</button>
    `

    return templateResult;
}

And to render it, I simply put it inside another templateResult

ui.js:

import { html } from 'lit-html';

import dummyComponent from './components/dummy.component.js';

var rootElement;
var state;
var templateResult;


function updateTemplateResult() {
    console.log("Updating template result...");

    templateResult = html`
        Hello ${state.name},

        ${dummyComponent(update)}
    `;
}

function update() {
    updateTemplateResult();
    render(templateResult, rootElement);
}

export var ui = {
    setRootElement: function (rootEl) {
        rootElement = rootEl;
        return ui;
    }
    , setState: function (st) {
        state = st;
        return ui;
    }
    , display: function () {
        update();
    }
}

and finally
app.js

import { router } from "./router.js"
import { init, rerender } from "./render.js"

import { ui } from "./ui.js";

var uiElement = document.getElementById("ui");
ui
    .setRootElement(uiElement)
    .setState({ name: "Mustafa" })
    .display();

this does not work because everytime updateTemplateResult is called, the dummycomponent is re-created and hence the counter goes back to zero.

is this the kind of problem to use webcomponents instread of simple javascript functions to create reusable components?

I know that is not an issue with your library, I just wanted to try my chance! Thanks in advance