That’s confusing as heck. Let’s talk about words that have the word “DOM” in them, because, it turns out there are a lot when you’re learning JS frameworks, especially Polymer.
Warning: I’m writing this article mostly to suss things out for myself. If there’s an error please let me know!
Here are the ones I’ve run across so far, and where they live:
- The DOM (everywhere)
- Local DOM (mostly Polymer)
- Light DOM (mostly Polymer)
- Shady DOM (Polymer)
- Shadow DOM (mostly Polymer (for now))
- Dominic “Dom” Toretto (The Fast and the Furious)
- Virtual DOM (React)
- Sub DOM (HTML5 canvas elements)
First of all, let’s acknowledge the fact that some of these names are just really poorly chosen. Don’t Light DOMs and Shady DOMs sound related? Well they’re not.
Alright let’s get into it.
This is the Document Object Model that, if you’re a web developer, you probably know about. The general DOM. The “cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents.” It’s an API. It’s a tree. It’s what you interact with when you’re on the elements tab of Chrome’s developer tools.
Here’s my attempt at a simple, functional definition: HTML elements and the way they are arranged; the understanding that elements can be children, siblings, or parents and accessed through each other. An element can only have one parent but unlimited children and siblings.
The elements of the DOM created and managed by a particular component.
The children of a particular component. The distinction between the Light and Local DOMs is a little subtle, but basically the Light DOM includes all of the element’s children, where the Local DOM is restricted to those which it manages directly.
That is to say, if Component A contains Component B, Component B’s children (its Light DOM) is part of Component A’s Local DOM, but not its Light DOM.
The Light DOM doesn’t have much to do with the…
A polyfill Polymer uses when the Shadow DOM isn’t available.
This one’s more complicated! Although I’ve mostly seen it discussed in the context of Polymer, it’s actually a W3C working draft / HTML5 thingie which will be implemented in future browsers and allow web components to be written without any fancy third party libraries. Read the specification here if you need help falling asleep.
The intention of Polymer is to act as a polyfill for web components. Hence the name. The Polymer developers just don’t want to wait around for the Shadow DOM and native web components to become a widespread reality.
So. The Shadow DOM is a web component’s Local DOM with a bonus stipulation: it cannot be directly accessed. Traditionally, a developer can reach into any part of the DOM. The Shadow DOM will allow a component to have complex internal structures but enforce it being treated as an atomic element.
The inner workings of Shadow DOMs can be styled using the `::` selector, but you won’t interact with them otherwise.
Dominic “Dom” Toretto
The main protagonist of The Fast and the Furious franchise, played by Vin Diesel. He is an ex-convict with a heart of gold, but not currently under consideration by the W3C. Like the Shadow DOM, his inner workings are mysterious.
This glossary has mostly dealt with Polymer things, but my intention is to untangle my personal internal mess of DOMs. This is a React thing. The Virtual DOM is a copy of the regular ol’ DOM that React keeps on hand to diff from the real DOM in order to trigger more efficient renders. It also means that React can be run server-side and generate HTML, which is pretty sick.
Canvas Sub DOM
The HTML5 canvas element’s accessible fallback content, which exposes information to assistive technologies like screen readers. When used correctly, it allows a one-to-one mapping between interactive canvas elements and keyboard commands. (I copied some wording for this definition from this article by Steve Faulkner.)
There you go! Again, please let me know if I’ve made mistakes so that I may correct them. I think this is *generally* accurate, though, and should serve as a good point from which to start untangling these almost-homonyms.
Update on 3/4/2015: Added the Sub DOM. Thanks to Ted O’Connor for the tip.