こんな テンプレートがあって

html`
	<div>
		<div class="a">
			${a()}
		</div>
		<div class="b">
			${b()}
		</div>
		<div class="c">
			${c()}
		</div>
	</div>
`

c の div の表示条件を追加して useC 変数が true のときのみ表示するようにしたい

html`
	<div>
		<div class="a">
			${a()}
		</div>
		<div class="b">
			${b()}
		</div>
		${useC
			? html`
				<div class="c">
					${c()}
				</div>
			`
			: null
		}
	</div>
`

すごく見づらい
かと言って if 文を使うなら 文が書けないといけないので関数の即時実行になって その中で if 文なのでもっと見づらい
{} が増えてネストや行数が増える

別のところで関数定義しておけばシンプルにはなるけど 別のところに書いてるのでテンプレートだけを見て理解できないから微妙
相当複雑でもないならテンプレート中に分岐の条件とかあってほしい

タグの html に条件を指定できて こうなってたら少しましかも

${
	htmlIf(useC)`
		<div class="c">
			${c()}
		</div>
	`
}

でもこれだと htmlIf の出力が切り替わるだけで c() の実行は常に行われる
表示しないときは表示用のデータがないこともあって エラーが出ないように工夫が必要になってくる
いらないはずの処理のために余計なことはしたくない

となるとやっぱり分岐か関数にして実行を遅延させるか
関数にするとこういう感じ

callIf(useC, () => html`
	<div class="c">
		${c()}
	</div>
`)

条件演算子よりマシな気もするけど なんかイマイチ
全体だとこうなってる

html`
	<div>
		<div class="a">
			${a()}
		</div>
		<div class="b">
			${b()}
		</div>
		${callIf(useC, () => html`
			<div class="c">
				${c()}
			</div>
		`)}
	</div>
`

やっぱり一般的なテンプレートみたいな書き方がベスト

html`
	<div>
		<div class="a">
			${a()}
		</div>
		<div class="b">
			${b()}
		</div>
		{IF useC}
			<div class="c">
				${c()}
			</div>
		{/IF}
	</div>
`

これが一番見やすい
ただテンプレートリテラルの使用上 埋め込む処理は事前計算されるから実現不可

html`
	<div>
		<div class="a">
			${a()}
		</div>
		<div class="b">
			${b()}
		</div>
		${IF(useC)}
			<div class="c">
				${() => c()}
			</div>
		${ENDIF}
	</div>
`

こういう構文にすればできるけど c() のところみたいに関数にしないとダメだし html は自作のものにして特別な事前処理が必要になるからやりたくない

ネストしない意味では hidden みたいな感じで使えるといいんだけどなー

html`
	<div>
		<div class="a">
			${a()}
		</div>
		<div class="b">
			${b()}
		</div>
		<div if=${useC}>
			${c()}
		</div>
	</div>
`