<div class="container">
  <select class="btn" name="item">
    <option>Alpha</option>
    <option>Beta</option>
    <option>Gamma</option>
    <option>Theta</option>
  </select>
  <input type="text" class="desc" name="desc">
</div>

En este ejemplo, el elemento seleccionado por defecto en el menú desplegable "seleccionar" es "Alfa". Quiero clonar el nodo completo con valores. Si selecciono un valor diferente en el menú desplegable e ingreso texto en el cuadro de entrada, y luego clono el nodo, solo se clona el valor del cuadro de texto. El valor del menú desplegable "seleccionar" en el nuevo objeto sigue siendo el valor predeterminado (Alfa).

¿Por qué el comportamiento de la clonación es diferente para "seleccionar" frente a "entrada"?

var parent = document.querySelector(".container");
var button = parent.querySelector(".btn");
var textbox = parent.querySelector(".desc");

  > textbox.value
  < "some random text"
  > button.value
  < "Gamma"

var cloned = parent.cloneNode(true);
var childButton = cloned.querySelector(".btn");
var childTextbox = cloned.querySelector(".desc");

  > childTextbox.value
  < "some random text"
  > childButton.value
  < "Alpha"