component-state-async.ts

import { component, State, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';

@component<number>({
  tagName: 'my-counter',
  state: 'Hello',
  render: template(({ state }) => html`${state}`)
})
class MyCounterElement extends JoistElement {
  @get(State)
  private state!: State<number>;
  
  connectedCallback() {
    super.connectedCallback();
  
    const res = Promise.resolve('World');
  
    this.state.setValue(res);
  }
}