JavaScript/HTML affichage incohérent de la case à cocher HTML interne

Question

Sur Firefox 54, la première et la troisième case à cocher affichent leur texte interne alors que la seconde n'a pas mais elles ont toutes la même structure, construite simplement en utilisant différentes méthodes. Quelle est la raison de ce comportement?

input2 = document.getElementById("input2"); 
 
input2.innerHTML = "Check me inner HTML"; 
 
input2.innerText = "Check me inner Text"; 
 

 
input3 = document.createRange().createContextualFragment("<input type='checkbox'>Check me fragment</input>"); 
 
document.body.appendChild(input3);

<input type="checkbox">Check me HTML</input> 
 
<input type="checkbox" id="input2"></input>

Answer 1

<input> éléments ne sont pas un "HTML intérieur". La structure HTML résultante est:

<input type="checkbox">Check me HTML 
<input type="checkbox" id="input2">Check me inner Text</input> 
<script type="text/javascript">/* your js */</script> 
<input type="checkbox">Check me fragment 

La seconde n'est pas un code HTML valide. Le texte "interne" ne sera pas rendu.

Je ne suis pas tout à fait sûr pourquoi le 3ème rend correctement. Le navigateur peut être en mesure de réparer le fragment avant qu'il ne soit inclus dans la page.
(Le </input> peut être simplement supprimé, ce qui rend le HTML valide)