DOM Glossary

Look at you. Learning React. Learning Polymer. Angular. Ember. Holy cow, that’s a lot of JavaScript things. Good on you. You know so much JavaScript, and so many words *about* JavaScript, so many verbs and nouns and gerunds and part pasticiples and innerjections. But now all those words are starting to get all wacked out in your head pudding. Your brain hole.

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:

  1. The DOM (everywhere)
  2. Local DOM (mostly Polymer)
  3. Light DOM (mostly Polymer)
  4. Shady DOM (Polymer)
  5. Shadow DOM (mostly Polymer (for now))
  6. Dominic “Dom” Toretto (The Fast and the Furious)
  7. Virtual DOM (React)
  8. 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.

The DOM

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.

Local DOM

The elements of the DOM created and managed by a particular component.

Light DOM

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…

Shady DOM

A polyfill Polymer uses when the Shadow DOM isn’t available.

Shadow DOM

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.

Virtual DOM

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.

 

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s