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