<script>
function onError() {
  document.querySelector("details").appendChild(
    document.querySelector("p")
  );
  document.execCommand("indent");
}

function onLoadOfStyle() {
  document.execCommand("delete");
  document.querySelector("details").contentEditable = "true";
  // For emulating the traditional behavior, collapse Selection to end of the
  // text node at end of the <style> (end of the text node after the comment
  // node).
  const style = document.querySelector("style");
  getSelection().collapse(style.lastChild, style.lastChild.length);
  document.querySelector("input").select();
}
</script>
<video focus="false">
<source onerror="onError()">
</video>
<details open>
<p>
<input contenteditable="false">
<style onload="onLoadOfStyle()">
<!-- x -->
</style></p></details></body>