hyperHTML で boolean attribute を使う

hyperHTML だと属性名とプロパティの違いがなくてプロパティが存在したらプロパティになって なければ属性として扱われます
なので hidden や disabled は普通に使えます

bind(document.body)`
	<div hidden=${true}>見えない</div>
	<div hidden=${false}>見える</div>
`

カスタムエレメントでも自分でプロパティを用意すれば selected とか active とかに boolean 値を設定できます

ただ通常の div や li などに data-selected とか data-active とかを boolean attribute として使いたいときにはできるのでしょうか

false では文字列で false 設定されます
hyperHTML では属性の値の方は変数で可変にできますが属性名の方はできません
要素全体を wire で出し分けることはできますがなんか大掛かりです

探してみると null や undefined が設定されると属性を削除する仕様のようです

bind(document.body)`
	<div data-xxx=${0}></div>
	<div data-xxx=${""}></div>
	<div data-xxx=${false}></div>
	<div data-xxx=${null}></div>
	<div data-xxx=${undefined}></div>
`
console.log(document.body.innerHTML)

<div data-xxx="0"></div>
<div data-xxx=""></div>
<div data-xxx="false"></div>
<div></div>
<div></div>

boolean attribute 風に使うなら

bind(document.body)`
	<div data-hidden=${invisible || null}></div>
`

のように || null をつけるのが良さそうです
boolean 型としてキャストした値が false の場合は属性が消えます
true の場合には空文字ではないですが boolean attribute の場合は値は基本見ないので問題ないと思います

空文字に合わせる必要があるなら

;`${invisible ? "" : null}`

か

const toba = x => x ? "" : null

;`${toba(invisible)}`

という感じですね