What's the difference between Polymer's shady DOM vs shadow DOM?

Question

I'm having issues using shadow DOM for one of the web-components (paper-stepper) and it requires the use of the shady DOM instead. I'm not sure what the differences are and why that is the case.

Answer 1

Here's a good explanation of why.

Tl;DR:

Shadow DOM:

Shadow DOM works by hiding the scoped DOM trees from the traditional tree walking functions and accessors (childNodes, children, firstChild and so on). These accessors return only the elements in your scope.

What this means is that it hides a layer of complexity from you. One of the examples I found online was about the <video></video> tag. It explains how within it there are the video controls, but those are abstracted away and you cannot see them. This is what the Shadow DOM does, but for all the web components.

Shadow DOM sounds nice, but there are limitations

• It’s a lot of code.
• It’s slow to indirect all the DOM API.
• Structures like NodeList can simply not be emulated.
• There are certain accessors that cannot be overwritten (for example, window.document,window.document.body).
• The polyfill returns objects that are not actually Nodes, but Node proxies, which can be very confusing.

This is where shady DOM comes in.

Shady DOM:

Shady DOM is a super-fast shim for shadow DOM that provides tree-scoping, but has drawbacks. Most importantly, one must use the shady DOM APIs to work with scoped trees.

By using the Shady DOM, you now don't have an abstracted view of the components. You can see everything. However with Shady DOM, you can examine how the tree would look like if Shadow DOM was being used instead by running this:

var arrayOfNodes = Polymer.dom(YOUR_SELECTOR_GOES_HERE).children;

So, taking all this information into consideration on how the different DOMs work, it seems like the paper-stepper web-component requires access to the whole tree to work properly. Since the Shadow DOM abstracts the inner elements, you have to use Shady DOM or refactor the code in such a way that the inner elements don't need to be accessed from outside the abstraction.