I want to use a custom boolean attribute to mark an element's contents as editable. I'm aware of the data-* attributes, but wasn't sure if they require a value. I don't need data-is_editable="false", as the lack of the attribute would be equivalent. I only care if it's "true" (if the attribute exists). I know I can use other attributes like class but I don't want to as it seems slightly inappropriate (correct me if I'm wrong about that).
Here's the resource I'm reading, maybe it's the wrong document or I've overlooked the information I'm looking for: http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute
So for example, is this legal and valid?
<div data-editable data-draggable> My content </div>
The example you show is valid. (Just like using disabled or checked in a form. Only xHTML force the presence of a value)
Although, the value returned is not a boolean. When you query this resource, you'll get an empty string for any empty data-* attributes.
Like so:
domNode.dataset.draggable; // log ""
domNode.dataset.notAdded; // log undefined
To get the presence as a boolean value, you can check with the hasAttribute method:
const isDraggable = domNode.hasAttribute("data-draggable");