mardi 10 mars 2020

Possible to skip subtree in nested lit-html calls?

I'm using just lit-html, not Polymer or any other component lib.

Scenario: Root component contains sub-component A contains sub-component B contains sub-component C

Ideal behavior: Root component renders, sub-component A realizes it doesn't need to rerender yet so it skips dirty checking and just returns the DOM sub-tree.

I want the root component to be able to re-render without the children necessarily re-rendering. Skipping dirty checking in nested components and returning a sub-tree if the parent component doesn't need to re-render.

Is it possible to achieve this kind of flow with directives?

So while the code below doesn't fit the bill (the counters refresh when root re-renders), hopefully it conveys what I'm trying to do (that is, I want div to re-render but not do anything for the asyncReplace parts but return what is already there):

async function* countUp2() {
    let i = 0;
    while (true) {
        yield i++
        await wait(500);
    }
}

const renderComponent = () => {
    render(
        html`<div>${asyncReplace(countUp())}${asyncReplace(countUp())}</div>`,
        this._shadowRoot
    )
}

setInterval(renderComponent, 500)



Aucun commentaire:

Enregistrer un commentaire