JavaScript で順に処理されるものなので書く順番で結果が変わる場合もある
bind(document.body)`
<e-lem mode=${"foo"} values=${{x: 1}}>${"bar"}</e-lem>
`
これは
elem.mode = "foo"
elem.values = {x: 1}
elem.textContent= "bar"
と同じこと
HTML みたいな定義型のものに見えるから 順番変えても問題なさそうに見えるけど mode と values の順番が変わると実行順も変わる
values が代入時に mode の値を使って shadowDOM 内を書き換えるのなら 順番によって結果も変わる
コンポーネント側でどんな順番でも同じ結果になるようにしてれば対処は可能
values を内部的に保存しておいて mode 変えると再度 values を設定して shadowDOM 内の更新をするとか
無駄な処理が増えて mode と values 両方変えると更新も 2 回必要になる
けど hyperHTML での定義順に依存したくないならそうするしかない
e-lem コンポーネント自体も hyperHTML で作っていれば setter は常に render して再描画する作りになってることが多いと思うのでそこまで気持ち的に無駄なことしてる感はなくなる