HN Explorer

Ask HN: Why Shadow DOM Instead of Canvas?

9 points by mch82 ↗ HN
I’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’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_API

WebGL - https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

8 comments

[ 5.2 ms ] story [ 34.4 ms ] thread
akersten
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 :)

mch82
I asked in a friend the same question & got this article in reply: “Google Docs switches to Canvas rendering, sidelining the DOM”, https://thenewstack.io/google-docs-switches-to-canvas-render...

So, no, I actually meant it as a real question and am curious what reasons people have. My suspicion is people aren’t aware of the Canvas API. People tend to use the technologies they know instead of taking a beat to look around and learn.

speedgoose
Google docs has a very specific rendering system, and I'm not sure whether the full interface is using canvas.
1123581321
The answer is still that relying on the benefits of the document model still makes sense for a lot of applications. It doesn’t matter whether a given engineer has experience with Canvas or not as much when the default choice (DOM) fits majority of use cases. Familiarity with Canvas API may actually endanger a project if an engineer advocating for it doesn’t understand the tradeoffs involved.
mch82
Also, I’d never advocate for using Canvas to replace HTML as a way to share text. I love web pages that work great as web pages, with artful CSS layouts. However, a lot of apps attempt to implement complex UI workflows as HTML forms and might do better with Canvas. And a lot of games seem like they could be implemented using Canvas so they’d run on the open web rather than as closed downloads distributed via app stores.
borplk
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...
dalmo3
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.
superfrank
I'm with you that this seems like a weird question from someone who doesn't fully understand what they're asking.

That being said, I for the Typescript part, I think it's just badly worded and what OP is getting at is that most modern FE frameworks favor JSS over CSS stylesheets.