data-* attributes and its accepted characters

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 / htpy

data-* attributes and its accepted characters #33