【Elm】HTMLタグの標準のプロパティではなく独自のプロパティを設定方法

最近、関数型の勉強も兼ねてElmをいじっています。
HTMLのタグを使っていて独自のタグを設定する方法が分からなかったので調べました。
例えば素のHTMLだと、、、

<span target-data="hogehoge">
 fuga
</span>

target-dataがHTML標準には存在せず、独自に定義した箇所になります。
これを静的型付けであるElmで設定するにはどうするか。

Html.Attributesにあるproperty関数を用いる設定する事が出来ます。

import Json.Encode as JsonEncode
span [property "target-data" (JsonEncode.string "hogehoge") ]]

property の二つ目の引数はValue型である必要があるので, Json.Encodeを使ってStringから変換してあげる必要があります。
この様にpropertyを使う事で自由に独自のプロパティを設定する事が出来ます。

参考

aknow2