demo · v133

Focus and selection

Type a few words, select some of them, then reparent the form. appendChild drops focus and selection; moveBefore keeps both. The use case: drag-and-drop builders and resizable layouts that need to relocate widgets without breaking keyboard or IME state.

slot A

slot B

active input id
selection text
last method

how to read this

Click into a title, drag-select a few characters, then press appendChild. The browser closes the active input, the highlight disappears, and you have to re-engage. Press moveBefore and both stay. This is exactly the difference that turns drag-and-drop reorder into something users tolerate or hate — you want to drag a row to a new position and continue editing where you left off.

see also