HTML5
riot
属性
Riot.jsDay 6

RiotタグとHTMLのグローバル属性

More than 1 year has passed since last update.

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***…イベント時のスクリプトを指定する属性

idclassstyleはわかりやすいかと思いますが、うっかりtitledirをRiot独自の目的に使ってしまわないよう、注意が必要です。

参考文献