Why Shadow DOM Instead of Canvas?

Question

I&rsquo;m curious why client-side Single Page Application frameworks like React & Angular use HTML & CSS for rendering instead of using the Canvas or WebGL APIs. It&rsquo;s always seemed like Canvas is underutilized. And it seems like React/Angular style frameworks want to do everything in Typescript anyway.Canvas - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_APIWebGL - https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

akersten · Accepted Answer

I might be going gray and crazy here, but surely you intended to ask: "why would anyone choose to re-invent the entire browser stack in Canvas instead of using the amazingly powerful, documented, understood, accessible, and performant document-rendering framework we've built over the last 30 years?"
Yeah, I've got no idea. If your first intuition when making a web-app is that you want to figure out how to custom render UI elements with subpixel anti-aliased fonts on an OpenGL surface and interface with screenreaders all on your own, you must be a PM at a large SV company with hundreds of bored developers whose KPIs measure only "how many more good things about the open Web can we ruin this month?"
Sorry, you've touched a nerve with this one :)

dalmo3 · Answer

The fact you mistook Shadow DOM for Virtual DOM and gratuitously thrown Typescript in out of context makes this post seem just a rant disguised as a question.

borplk · Answer

It's basically similar to re-inventing HTML/CSS. You'd have to re-invent CSS, event handling, layers, layouts, box models, event propagation, hover, mouse-in, mouse-out, etc...