HTMLタグのidにハイフンを使うメリットはなんですか？

Question

stripeの公式のサンプルコードを見ると、<div id="card-element"></div>のように、idの値にハイフンが使われていました。
JavaScriptではHTMLのidをそのままエレメントのオブジェクトとして使えるので、僕は普段、idは変数名のようにcardElementなどのように書きます。
ハイフンがあるとそのまま使えないので、document.getElementById('card-element')しないと使えませんよね？
どういう理由があってこうなってるんでしょうか？

Answer 1

ハイフンがあるとそのまま使えない

ハイフンがなくてもそのまま使うのは避けてください

Answer 2

これは命名規則に関わる話なので、
メリット、デメリットの問題ではありません。
現場によって、要件によって、変わったり、使い分けられたりされます。
-で単語などを結ぶ命名規則を、ケバブケースなどと言います。
質問者さんが書かれたものは、キャメルケースと呼ばれています。

他には、_で結ぶ、スネークケースなど、複数ありますので、
プログラミング 命名規則と調べてみて、勉強されるとよいかと。

HTMLのidをそのままエレメントのオブジェクトとして使えるので

yambejpさんの回答通り、
その仕様を使うのは、避けた方がいいでしょう。
どこで定義されているのかがわかりづらくなり、
メンテナンス性が非常に悪くなります。
JavaScript上の処理は、あくまで、JavaScript上での定義、記述が望ましいでしょう。
また、上記の弊害として、
JavaScriptのデフォルトの変数名と被った時などに、要素の取得ができない等、
多くの不都合を生む可能性があります。