Shady DOM Problems

I am very excited about Shadow DOM. It is IMO one of the most important aspects of web components. But there is a problem. As of this writing, only Chrome supports Shadow DOM. Thus most developers are developing web components against a Shadow DOM polyfill. For example, Polymer defaults to using Shady DOM, their Shadow DOM polyfill.

The problem is that these polyfills are not exact polyfills. They are approximations. Meaning they are incompatible with the actual Shadow DOM spec.

I have been burned by this twice now: I write some code. Test it under Shady DOM. Then later find that that same code doesn’t work under Chrome’s native Shadow DOM.

The first time I was burned had to do with the way form elements inside of Shadow DOM are submitted. To make a long story short: In Shady DOM they are submitted. Under Shadow DOM they are not. This broke my app. I describe the problem in more detail here:

The second time I got burned was this morning. I have a third party web component that I am using. It is actually a very nice web component called paper-autocomplete. It works perfectly under Shady DOM. But when I tried to put this same component on a page that uses native Shadow DOM, it broke.