◆ wire()`` はその場で DOM の作成・更新を行う
◆ すでに画面上にあるなら wire()`` の返り値は捨てても画面を更新できる
◆ 親の bind を再実行しなくても部分更新が簡単にできる
◆ CustomElements なしでコンポーネントみたいなことができる

hyperHTML の wire

hyperHTML では HTML を書く方法が bind と wire に分かれています
bind が document.body などの要素にタグテンプレートリテラルから作った要素をセットするものです
wire は部分的な要素を作るだけで基本的に bind や wire のテンプレート中の埋め込み部分に HTML を書く場合に使います
なので wire は一番上が bind になってるテンプレート中で使わないと意味ないと思ってました
しかし wire は DOM 要素を作成・更新した上でその要素を返すものなので すでに画面上に表示されていれば返り値を捨てても 画面が書き換わります

import { bind, wire } from "https://unpkg.com/hyperhtml?module"

bind(document.body)`
<div>TEXT</div>
<section>${sub()}</section>
`

function sub() {
const html = wire()
const update = n => html`
<button onclick=${() => update(n + 1)}>ADD</button>
${Array.from(Array(n), (_, i) => wire()`<div>${i}</div>`)}
`
return update(1)
}

sub では実行時に update の返り値 つまり wire()`` の返り値を返しています
なので ボタンなどが section の中に表示されます
注目するのはボタンを押したときの挙動です

update に n + 1 を引数に実行しています
update は wire()`` の処理をするだけです
返り値は使ってません
ですが すでに section 内に表示されている button などが更新されます

update は毎回同じ html 関数を使っているので 同じ要素が更新されます
html を外部に保持しておらず毎回 wire()`` を使っていると新規に要素を作るので返り値を捨てると何も起きません

この仕組みを使えば sub の中だけで更新したいときに 親に通知して bind の関数を再実行してもらう必要がありません
sub の中だけで完結できます
CustomElements なしで コンポーネント風なことが簡単にできます
wire() で作られる関数がコンポーネントみたいなものです

lit-html の場合

lit-html の場合は bind と wire のような違いはありません
html タグ関数のみです
この関数はテンプレートを作るだけで更新は行わないので hyperHTML と同じようなことを実行しても画面は更新されません

import { html, render } from "https://unpkg.com/lit-html?module"

render(html`
<div>TEXT</div>
<section>${sub()}</section>
`, document.body)


function sub() {
const update = n => html`
<button @click=${() => update(n + 1)}>ADD</button>
${Array.from(Array(n), (_, i) => html`<div>${i}</div>`)}
`
return update(1)
}

update でテンプレートを返しても render しない限りは更新されない上 render で指定する親要素を取得できないので sub はテンプレートを返すのではなく 自分で親要素を作ってそこに render した上で親要素を返すことになります
以前書いた lit-html をコンポーネント風に扱う方法みたいなことになります