[解決済み] HTML5の空のデータ属性は有効か？

質問

指定した要素の下にインラインモダルを表示するシンプルなjQueryプラグインを書きたいと思っています。私のアイデアは、要素に指定されたデータ属性に基づいてスクリプトが自動で実行されることです。

非常に基本的な例です。

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

というのは、もし data-modal-target は有効なのでしょうか、それとも data-modal-target="true" ? 私はIE9などより劣るものは気にしません。私の唯一の要件は、それが有効なHTML5であることです。

どのように解決するのですか？

有効ですが、ブール値ではありません。

カスタムデータ属性の指定 は、空の属性の取り扱いに関する変更には言及していませんので 空の属性に関する一般的な規則 が適用されます。

特定の属性は、値を指定せずに属性名だけを指定することができます。

次の例では disabled 属性は、空の属性構文で与えられています。

<input disabled>

empty属性の構文は、次の例のように、属性の値として空の文字列を指定することと全く同じであることに注意してください。

<input disabled="">

つまり、空のカスタムデータ属性を使用することは許可されていますが、booleanとして使用するためには特別な処理が必要なのです。

空の属性にアクセスする場合、その値は "" . これはファルシーな値なので if (element.dataset.myattr) を使って属性が存在するかどうかをチェックすることができます。

を使用する必要があります。 element.hasAttribute('myattr') または if (element.dataset.myattr !== undefined) の代わりに

Lloyd の回答は間違っています。彼はboolean属性のマイクロシンタックスへのリンクに言及していますが data-* 属性は、仕様では boolean として指定されていません。