hyperHTML で boolean attribute を使う
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ 属性に null, undefined を入れると属性が消える
hyperHTML だと属性名とプロパティの違いがなくてプロパティが存在したらプロパティになって なければ属性として扱われます
なので hidden や disabled は普通に使えます
カスタムエレメントでも自分でプロパティを用意すれば selected とか active とかに boolean 値を設定できます
ただ通常の div や li などに data-selected とか data-active とかを boolean attribute として使いたいときにはできるのでしょうか
false では文字列で false 設定されます
hyperHTML では属性の値の方は変数で可変にできますが属性名の方はできません
要素全体を wire で出し分けることはできますがなんか大掛かりです
探してみると null や undefined が設定されると属性を削除する仕様のようです
boolean attribute 風に使うなら
のように || null をつけるのが良さそうです
boolean 型としてキャストした値が false の場合は属性が消えます
true の場合には空文字ではないですが boolean attribute の場合は値は基本見ないので問題ないと思います
空文字に合わせる必要があるなら
か
という感じですね
なので 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)}`
という感じですね