Hydrate: no attributes when missing elements are filled in #2726
Description
Reproduction
Consider the following markup:
<div id="app"><div class="app"><ul><li>1</li></ul></div></div>
and the following code:
function App() {
return <div className="app"><List/></div>
}
function List() {
return <ul suppressHydrationWarning={true}><Item key="1" name="1"/><Item key="2" name="2"/></ul>
}
function Item({name}) {
return <li name={name}>{name}</li>
}
hydrate(<App/>, document.querySelector('#app'));
Note, that the initial markup is missing <li name="2">2</li>.
The result is:
<div class="app"><ul><li>1</li><li>2</li></ul></div>
Notice that the name="2" attribute is missing.
Expected Behavior
React sets attributes on the filled-in elements. I think this should be the expected behavior.
Actual Behavior
Attributes are missing for filled-in elements (the name="2" attribute is missing).