Because you can't just ask the OS to "please paint text caret here thankyou", and browsers do not expose a powerful enough native text editing control. So you end up reimplementing one in JS/HTML/CSS, including the caret.

The WinAPI function SetCaretPos seems to do that: https://msdn.microsoft.com/en-us/library/windows/desktop/ms6...

Well, because, in order to satisfy the most finicky of its users (myself included), VS Code offers no less than 6 styles for its cursor ('block', 'block-outline', 'line', 'line-thin', 'underline' and 'underline-thin') and 5 animations ('blink', 'smooth', 'phase', 'expand' and 'solid'). Also, in a future release the themes will be allowed to change the color of the cursor to any of the 16,581,375 colors in the RGB spectrum.

Does that answer your question? :)