using 'host.render()' and 'host.content()' causes a TypeScript error about hybrids HOT 4 CLOSED

function toggleEdit(host: ISecondComponent) {
    host.editMode = true
    host.draft = host.model
    host.content().querySelector('input').focus()
}

function toggleEdit(host: Component<ISecondComponent>) {
    host.editMode = true
    host.draft = host.model
    host.content?.(host).querySelector('input').focus()
}

import { Model, define, html, store, Component } from "https://esm.sh/[email protected]"

export interface IModel {
    prop1: number
}

export const ModelStore: Model<IModel> = {
    id: true,
    prop1: 1
}

function toggleEdit(host: Component<ISecondComponent>) {
    host.editMode = true
    host.draft = host.model
    host.content?.(host).querySelector('input').focus()
}

export interface ISecondComponent extends HTMLElement {
    model: IModel
    draft: IModel
    editMode: boolean
}

export default define<ISecondComponent>({
    tag: "a-second",
    model: store(ModelStore),
    draft: store(ModelStore, { draft: true }),
    editMode: {
        get: (host, lastValue) => !host.model || lastValue,
        set: (host, value, lastValue) => value,
    },
    content: ({ draft, model, editMode }) => html`
        ${editMode ? html`
            <form>
                <input value="${draft.prop1}" oninput="${html.set(draft, 'prop1')}" />
                <button type="submit">Save</button>
            </form>
        ` : html`
            ${store.ready(model) && html`<div>${model.prop1}</div>`}
            <div><button onclick="${toggleEdit}">Edit</button></div>
        `}
    `
})

function toggleEdit(host: ISecondComponent) {
  host.editMode = true;
  host.draft = host.model;
  host.content().querySelector("input")?.focus();
}

export interface ISecondComponent extends HTMLElement {
  model: IModel;
  draft: IModel;
  editMode: boolean;
  content: () => ISecondComponent;
}