What is the difference between Polymer shady DOM and shadow DOM?

Question

I am having problems using the shadow DOM for one of the web components (paper stepper), and this requires the use of a shadow DOM. I do not know what the differences are and why this is so.

Answer 1

Here is a good explanation why.

Tl; DR:

Shadow DOM:

Shadow DOM works by hiding visible DOM trees from traditional tree walking functions and accessors (childNodes, children, firstChild and so on). These accessors only return items in your area.

This means that it hides the level of difficulty from you. One example that I found on the Internet concerned the <video></video> . It explains how there are video controls inside it, but they are distracted and you cannot see them. This is what the Shadow DOM does, but for all web components.

DOM shadow sounds good, but there are limitations

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

Here is the shadow DOM.

Shady DOM:

Shady DOM is an ultra-fast shader for the shadow DOM that provides wood but has flaws. Most importantly, you need to use the shady DOM API to work with areas with areas.

Using the Shady DOM, you now have no abstract representation of the components. You can see everything. However, with the help of the Shady DOM, you can check how the tree will look if the Shadow DOM was used instead by running this:

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

So, given all this information about how different DOMs work, it seems that the paper-stepper web component requires access to the entire tree for it to work properly. Because the Shadow DOM abstracts the internal elements, you must use the Shady DOM or reorganize the code so that the internal elements do not need access from outside the abstraction.