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

Neste exemplo, o elemento selecionado por padrão no menu suspenso "selecionar" é "Alfa". Eu quero clonar o nó completo com valores. Se eu selecionar um valor diferente no menu suspenso e inserir algum texto na caixa de entrada e clonar o nó, apenas o valor da caixa de texto será clonado. O valor do menu suspenso "selecionar" no novo objeto permanece o padrão (Alfa).

Por que o comportamento da clonagem é diferente para "selecionar" vs "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"