To what degree can the Shadow DOM be emulated using a polyfill?

Question

Can the Shadow DOM W3C draft be polyfilled in JavaScript by providing custom functions for searching and traversing the DOM? Has this been done? The attempts I've found have been rather meek shims and appear not to make much effort to emulate the spec.

I appreciate that this is not an easy task, but surely someone has given it a thorough consideration?

Answer 1

I've been working on this exact problem for the last few months.

Bottom line there is a polyfill that works on evergreen browsers here https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

^ polyfilling of CSS features like @host are not in there yet, coming soon

So, yes, it's a hard thing to polyfill, specifically because we have to invent secondary DOM trees. We tried to make it as user-friendly as possible, which required the use of a rather invasive wrapper technique.

In other words, if you div = document.createElement('div'), you get a thing that looks like a DIV and works like a DIV, but is actually a Wrapper object. The ultimate goal of course, is for your code to look the same whether it's running under the polyfill or under a native implementation.

It's not 100% bulletproof. In particular it's not possible for us to wrap document for you, so you have to do that yourself, somewhat like this:

wrap(document).querySelector(...)

Other than the document issue, the wrappers are intended to work transparently. This is all brand new, so I apologize for the lack of docs. We are working on that as we speak.

Please file issues if you have questions or problems, we love to get feedback. There is also an email channel for discussing this polyfill (and the other polyfills in that org) at polymer-dev@googlegroups.com.

I doubt this stuff is widely implemented

True, but it's in Chrome at least.