빈 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>

빈 속성 구문은 다음 예제에서와 같이 속성 값으로 빈 문자열을 지정하는 것과 정확히 동일합니다.

<input disabled="">

따라서 빈 사용자 지정 데이터 속성을 사용할 수 있지만 부울로 사용하려면 특별한 처리가 필요합니다.

빈 속성에 액세스 할 때 해당 값은 ""입니다. 거짓 값이기 때문에 if (element.dataset.myattr)속성이 있는지 확인하는 데 사용할 수 없습니다 .

element.hasAttribute('myattr')또는 if (element.dataset.myattr !== undefined)대신 사용해야 합니다.

로이드의 대답은 틀 렸습니다. 그는 부울 속성 microsyntax에 대한 링크를 언급했지만 data-*속성은 사양에서 부울로 지정되지 않았습니다.

답변

예, 완벽하게 유효합니다. 귀하의 경우 data-modal-target부울 속성을 나타냅니다.

2.4.2 부울 속성

요소에 부울 속성이 있으면 참 값을 나타내고 속성이 없으면 거짓 값을 나타냅니다.

답변

예, 사용자 정의 데이터 속성 값을 생략하는 것은 유효한 구문입니다.

“속성은 네 가지 방법으로 지정할 수 있습니다.

빈 속성 구문 속성 이름입니다. 값은 암시 적으로 빈 문자열입니다. […] ”
https://developers.whatwg.org/syntax.html#attributes-0

답변

한편으로는 유효성 검사기 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 다른 부울에 대해 매우 명확하게 말합니다. https://www.w3.org/TR/html5/forms.html#attr-input-checked 와 같은 속성checked

답변