Should this be an RFC?

• This is not a substantial change

Which package is this a feature request for?

Task (@lit/task)

Description

When you render a sub-component instance in the complete function of a Task the sub-component is being re-instantiated every time the Task re-runs. This is not great because thus the sub-component will lose state every time.

It would be great if the sub-component instance would just get the updated bound data and the DOM changes would happen only where that data is used without re-rendering the whole component again.

Right now if you don't have the case where you would run the Task only once and render a sub-component the Task feature is not very useful for using dumb sub-components that need data updates in response to some user interaction.

Thank you!

Code example:
`import { LitElement, css, html } from 'lit'
import { MyComponent } from './my-component';
import { Task } from '@lit/task';

export class MyElement extends LitElement {
static get properties() {
return {
count: { type: Number }
}
}

constructor() {
super()
this.count = 0
}

_apiTask = new Task(
this,
([count]) => count,
() => [this.count]
);

render() {
  return html`
        ${this._apiTask.render({
      pending: () => html`Loading user info...`,
      complete: (count) => html`<my-component .data="${count}"></my-component>`,
    })}
  `
}

_onClick() {
  this.count++
}

}
}

window.customElements.define('my-element', MyElement)`

Alternatives and Workarounds

I guess a workaround would be to keep that state outside of the child component in the parent component and feed it via bound reactive properties every time.