◆ 画面の更新処理は非同期であとから一度だけ呼び出し
◆ 最初の呼び出しでフラグ立てて すでに立ってたら何もしない

hyperHTML や lit-html でプロパティを更新したときに表示も更新するなら setter を使って render 等の表示を更新するメソッドを呼び出すかと思います
ただ その方法だと ⇩ みたいにプロパティが複数あって一度に全部が変更されると 3 回も render メソッドが実行されることになります

<x-elem foo=${this.foo} bar=${this.bar} baz=${this.baz}></x-elem>

プロパティがいくつ変更されても 1 回の変更では 1 回だけ更新するようにしたいです

ということでこういうものを作ってみました

customElements.define("x-elem", class extends HTMLElement {
constructor() {
super()
this.update_reserved = false
}

connectedCallback() {
this.render()
}

render() {
bind(this)`
${this._foo}<br>
${this._bar}<br>
${this._baz}
`
}

set foo(value) {
this._foo = value
this.update()
}

set bar(value) {
this._bar = value
this.update()
}

set baz(value) {
this._baz = value
this.update()
}

update() {
if (this.update_reserved) return
this.update_reserved = true
Promise.resolve().then(() => {
this.update_reserved = false
this.render()
})
}
})

setter では値の更新後に update メソッドを呼び出します
update メソッドでは update_reserved プロパティを true に設定して Promise.resolve を使って非同期であとから更新処理を実行します
非同期の処理が呼び出されるまでに何回 update メソッドが呼び出されても update_reserved が true なら何も実行されません
非同期の処理で render メソッドが呼び出されると同時に update_reserved が false になるので次のタイミングでの更新は問題なく可能です

デメリットをあげるなら 非同期であとから更新なので同期的な処理で更新後の値は取得できません
ただ 基本取得するのは現時点の値で良くて setter による自動での更新で更新後の値が欲しいことはまずないと思うので特に問題はないと思います