Setting value and dataset-attribute gives me different numbers despite the same variable being set to both?

it is I, Boogabooga,

I have a conundrum which baffles me greatly.
I have a function which dynamically creates some HTML elements with JS, and when setting the .value the results is completely different as to when I set dataset.value despite the same variable being assigned to both, below is my JS:

function displayBox(title, src, id){
    let container = document.createElement('div');
    let list = document.createElement('ul');
    let listItem = document.createElement('li');
    let image = new Image();
    listItem.innerHTML = title;
    image.src = src;
    listItem.dataset.value = id;
    listItem.value = id;
    listItem.innerHTML += id;
    list.appendChild(image);
    list.appendChild(listItem);
    container.appendChild(list);
    container.classList.add('shopifyProduct');
    return container;
}

Here is the HTML element when I inspect it with dev tools

<li data-value="6736442654756" value="1933934628">Cactus Sneaker Women 6736442654756</li>

I am outputting the value in the innerHTML as well just to see if somehow where I output it changes its value.
As you can see in the above function the variable: id is being assigned to both attributes yet different values end up being assigned?

Has anyone encountered this strange behaviour before?

Thanks,
-Boogabooga

>Solution :

Firstly, to demystify the result … 1933934628 = 6736442654756 % 4294967296 and typeof list.value === 'number' …

As to why???

The value attribute for li has an actual meaning, and it’s obviously limited to 32bits

Note: according the HTML specs, the li element has the following properties

Content attributes:
Global attributes
If the element is not a child of an ul or menu element: value — Ordinal value of the list item

So, value is only relevant when li are children of ol … when children of ul or menu (the only other valid parent of an li) then value is not "defined"

Seems some (most?) browsers aren’t "up to spec" on this …

Also, there is no mention of the 32bit limit anywhere in the spec, just that value must be a valid integer

In short, don’t use value attributes on any elements that don’t have that as a "native" attribute, like input for example

You’re using data-value already, so stick with that