JavaScript/HTMLのチェックボックスの内部表示が一貫しないHTML

Question

Firefox 54では、最初と3番目のチェックボックスは内側のテキストを表示しますが、2番目のチェックボックスは同じ構造を持ちます。この行動の理由は何ですか？

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>要素は、 "内部HTML" を持っていません。結果のHTML構造は次のとおりです。

<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 

2番目のHTMLは有効ではありません。 「内部」テキストはレンダリングされません。

第3のレンダリングが適切にレンダリングされる理由はわかりません。ブラウザは、ページに含まれる前にフラグメントを修正することができます。
（</input>が削除され、HTMLが有効になることがあります）