Имеются ли допустимые атрибуты данных HTML5?

Я бы хотел написать простой плагин jQuery, который отображает встроенные модалы в указанных элементах. Моя идея состоит в том, чтобы script автоматически инициализировался на основе атрибутов данных, указанных на элементах.

Самый простой пример:

<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"? Я не забочусь о чем-то crappier чем IE9 и т.д., Мое единственное требование - это быть допустимым HTML5.

Ответы

Ответ 1

Да, отлично. В вашем случае data-modal-target будет представлять собой логический атрибут:

2.4.2 Логические атрибуты

Наличие логического атрибута для элемента представляет истинное значение значение, а отсутствие атрибута - ложное значение.

Ответ 2

Спецификация атрибутов пользовательских данных не содержит никаких изменений в обработке пустых атрибутов, поэтому общие правила о пустых атрибутах примените здесь:

Некоторые атрибуты могут быть указаны путем указания имени атрибута без значения.

В следующем примере атрибуту disabled присваивается пустой синтаксис атрибута:

<input disabled>

Обратите внимание, что пустой синтаксис атрибута в точности эквивалентен заданию пустой строки как значения для атрибута, как в следующем примере.

<input disabled="">

Таким образом, вам разрешено использовать пустые атрибуты пользовательских данных, но специальная обработка должна использоваться в качестве логических.

Если вы получаете доступ к атрибуту через element.dataset:

  • Когда присутствует пустой атрибут, значение равно "".
  • Когда атрибут отсутствует, вы получаете undefined.

Поэтому вы не можете просто проверить как if (element.dataset.myattr), потому что он всегда будет false.

Вы можете и должны проверять логические атрибуты как if (element.dataset.myattr !== undefined).

Ответ Ллойда неверен. Он упоминает ссылку на логические атрибуты microsyntax, но атрибуты data-* не специфицируются как boolean в spec.

Ответ 3

Да, это синтаксис, чтобы опустить значение для атрибута пользовательских данных.

"Атрибуты могут быть указаны четырьмя различными способами:

Синтаксис пустой атрибуты Просто имя атрибута. Значение неявно является пустой строкой. [...] " https://developers.whatwg.org/syntax.html#attributes-0

Ответ 4

С одной стороны, он передает валидатор 16.5.7 https://validator.w3.org/nu/#textarea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

С другой стороны, HTML5 не указывает в спецификации атрибутов data-, что они являются логическими: https://www.w3.org/TR/html5/dom.html#custom-data-attribute, в то время как в нем говорится, что очень ясно для других логических атрибутов, таких как checked https://www.w3.org/TR/html5/forms.html#attr-input-checked