HTMLのカスタムデータ属性（data-*）へのアクセス

TypeScript Electron

小ネタです。

HTML5でカスタムデータ属性（いわゆる「data-*」属性）が導入されましたが、JavaScript（やTypeScript）からのアクセスの際のキー命名規則については、MDNの記述がやや微妙です（ここでは原典として英語版を参照しています）。

developer.mozilla.org

  • the name must not start with xml, whatever case is used for these letters;
  • the name must not contain any semicolon (U+003A);
  • the name must not contain capital A to Z letters.

developer.mozilla.org

  • The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).
  • The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.

思ったこと。

  • JavaScript上での属性名は、datasetの箇条書きの第2項目だと「no dashes, dots, etc.（ダッシュやドットなどを含まない）」とあるが、置き換え規則（英小文字の直前にダッシュがある場合、これを削除し次の文字を大文字にする）を考えると、「ドットや英字以外の手前にあるダッシュ」の扱いが不明
  • 属性名に英数字以外、例えば漢字やカナが入るとどうなるのか（別に使いたいわけではありませんが）

というわけで、やってみました。

jsfiddle.net

  • 属性「data-a-b.c:d_e--fg」は、JavaScriptからは「aB.c:d_e-Fg」でアクセス可能
  • 属性「data-あいう」は、JavaScriptからは「あいう」でアクセス可能

「ダッシュ＋英小文字」が英大文字に置き換わるだけで、他はそのままでした。置き換え規則が正しい、と考えればよさそうです。

なお、名前によってはドット記法でのアクセスができなくなります（日本語は可能ですが、JavaScriptの文法上で意味をもつ記号が入ると無理です）。

基本的には、"data-aaa-bbb-ccc"といった名前が想定されていると思うので、あまり外れない使い方の方が無難とは思いますが。