Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Organization

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

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独自の目的に使ってしまわないよう、注意が必要です。

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?