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