data-* attributes and its accepted characters

[avila-gabriel]

here I'm in the browser's console testing accepted characters for the data-* attribute, which is valid html

function testDataAttributes() {
    const charactersToTest = [
        'data-something_that',  // underscore
        'data-something-that',  // dash
        'data-something.that',  // dot
        'data-something@that',  // at symbol
        'data-something#that',  // hash
        'data-something$that',  // dollar
        'data-something%that',  // percent
        'data-something^that',  // caret
        'data-something&that',  // ampersand
        'data-something*that',  // asterisk
        'data-something(that',  // open parenthesis
        'data-something)that',  // close parenthesis
        'data-something+that',  // plus
        'data-something=that',  // equals
        'data-something{that',  // open curly brace
        'data-something}that',  // close curly brace
        'data-something[that',  // open square bracket
        'data-something]that',  // close square bracket
        'data-something|that',  // pipe
        'data-something\\that', // backslash
        'data-something/that',  // forward slash
        'data-something:that',  // colon
        'data-something;that',  // semicolon
        'data-something"that',  // double quote
        'data-something\'that', // single quote
        'data-something<that',  // less than
        'data-something>that',  // greater than
        'data-something,that',  // comma
        'data-something?that',  // question mark
        'data-something!that',  // exclamation
        'data-something~that',  // tilde
        'data-something`that',  // backtick
        'data-something that'   // space
    ];

    charactersToTest.forEach(attribute => {
        // Create a new element
        var el = document.createElement('div');
        
        // Set the data- attribute
        el.setAttribute(attribute, 'test value');
        
        // Append the element to the body (optional, to see it in the DOM)
        document.body.appendChild(el);
        
        // Log the element and the attribute value
        console.log('Testing:', attribute);
        console.log('Element:', el);
        console.log('Attribute Value:', el.getAttribute(attribute));
        
        // Check if the attribute is correctly set
        if (el.getAttribute(attribute) === 'test value') {
            console.log('The data attribute with character "' + attribute + '" is valid.');
        } else {
            console.log('The data attribute with character "' + attribute + '" is not valid.');
        }

        // Remove the element from the body
        document.body.removeChild(el);
    });
}

// Run the test
testDataAttributes();

we've left with those:

        'data-something_that',  // underscore
        'data-something-that',  // dash
        'data-something.that',  // dot
        'data-something:that',  // colon

only those are valid, including underscores which conflicts as we use it as a replacement for "-". Now those are only for data-* attributes so maybe there is something here, perhaps a special treatment when the attribute starts with "data_" sounds like a starting point but I have no idea how to go from there. Of course using the dict works fine, but if anyone have something in mind for this it would be more elegant

[pelme]

Thanks for the throughout research on different attributes.

Replacing _ with - is a bit arbitrary but more useful than keeping the underscores. Dashes are what is used in the html spec for aria and data attributes. This is also what pretty much all libraries use.

Dots and colons are used by different frameworks but not used by attributes in the html spec. I am not convinced it is worth adding a special case for double underscores or other replacements.

Again, thanks for the idea and research!