JavaScriptでdata属性が取得できない

HTML文書のdata属性値を取得する際ちょっとハマったのでメモ。

<p id="text" data-Text="取得！">data</p>

上記のdata属性値を取得しようとするとエラーとなった。

const p = document.getElementById('text');

p.addEventListener('click', (e) => {
  const data = e.target.dataset.Text;
  console.log(data); //undefined
});

e.target.dataset.TextのTextと大文字にしたのが原因で、HTML文書に指定したdata-のあとの大文字小文字に関係なく、jsで取得するときは小文字にする。

//undefinedになる
const data = e.target.dataset.Text;

//undefinedにならない
const data = e.target.dataset.text;

data属性値が取得できなくてちょっと悩んでたけど、MDNに答えが載ってた。

HTML では
属性の名前は、 data- で始まります。文字、数字、ダッシュ (-)、ドット (.)、コロン (:)、アンダースコア (_) のみを入れることができます。ASCII 大文字の A から Z は小文字に変換されます。

参考）HTMLElement: dataset プロパティ - Web API | MDN