Setting the value of a progress element to 0 removes the attribute

[charlier]

Reproduction

If you use the progress element, and set the value to be 0, Preact removes the value attribute in the DOM.

This has the slight disadvantage that if you're styling it, Firefox treats ::-moz-progress-bar to be 100%, whereas WebKit thinks ::-webkit-progress-value is 0%.

Steps to reproduce

Preact: 10.4.8

• Create a progress element, with a value of 0:
  const Progress = () => <progress value={0} max="100" />;
• Inspect the Element and notice the value isn't present.

Expected Behavior

This behaviour to remain the same as React, with the value not being removed.
React: https://codepen.io/charlier/pen/NWNONME
Preact: https://codepen.io/charlier/pen/dyMgMQR

Actual Behavior

Setting the value to 0 removes the attribute.

facebook/react#6704 goes into a little bit of historical detail for this in React, with a workaround.

[philipmw]

I am glad I found this issue; I ran into the same problem when converting an existing webapp from React to Preact -- a progress bar that was working as expected began exhibiting this behavior.

I was able to solve the problem to my satisfaction by using the suggestion in this StackOverflow answer -- to cast my value variable to a float. Since the HTML spec apparently declares value attribute to be a float anyway, I'm not even mad.