Riot.js Advent Calendarに空きがあったので、過去の日付を埋めるように飛び入り参加してみました。
Riotタグにはoptsに与えるものとしての属性を指定できます…が、ものによっては思わぬ動作をすることがあります。
Riotタグの属性
マウントしてから完全にJavaScriptで動かすような用途であれば全く関係しないのですが、ページの一部にRiotエレメントをはめ込むような使い方をする場合、あるいは別のRiotタグの内部でタグを使うような場合に、Riotタグにも属性を指定できます。例えば、<some-tag foo='bar'></some-tag>のように書けば、タグ内ローカルのopts変数や、タグインスタンスのoptsプロパティ（両者は同じオブジェクトです）で、opts.foo='bar'となっています。
想定外の、ツールチップだらけ
で、あるときモーダルを表示するRiotタグを作って、titleでモーダルのタイトルを指定するように指定しました。もちろんそれ自体は動いたのです…が、モーダルのどこにマウスカーソルを持っていっても、titleで設定したものがツールチップとして出現する、という事態に見舞われてしまいました。
グローバル属性
実は、HTMLタグには、いくつか「グローバル属性」という、Riotに使うようなHTMLの仕様にないタグにも適用可能な属性があります。
-
id…文書の要素にIDを振る。これは（タグ内で使うのではなく）Riotタグに振っても普通に便利。 -
title…ブラウザではたいていツールチップとして表示される属性 -
lang…中身の言語を指定する。RiotとHTMLで同じ意味を指定するなら問題なさそう。 -
translate…ページを翻訳する際に、中身まで翻訳するか指定する属性 -
dir…横書きの向きを指定する属性 -
class…CSSのクラスを指定する属性 -
style…スタイルシート指定の属性 -
on***…イベント時のスクリプトを指定する属性
idやclass、styleはわかりやすいかと思いますが、うっかりtitleやdirをRiot独自の目的に使ってしまわないよう、注意が必要です。