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?

Morrie

I can't image how this would work, as the Shadow DOM is exposing the browser internal UI that has not been available until this point. A solution would need to completely replicate the browser UI behaviour from scratch. – Sirdar

@Matt Stone - One idea could be to have CSS hide dom elements that are part of the shadow dom and amend the Javascript DOM query functions (for example getElementById) such that they will not return any hidden DOM elements. Of course, there is much more to it than that and a polyfill would obviously have limitations. – Morrie

@PatriciaBrothers—it could possibly be emulated using document fragments, or by removing the shadow components from the DOM and putting them into, say, a div. I doubt this stuff is widely implemented yet so not much need for it. – Aldwon

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 [email protected].

I doubt this stuff is widely implemented

True, but it's in Chrome at least.

Saari

Wow, Scott. This is amazing. I assume this would (will) be a hit were you present this att Google I/O. If Web Components can be successfully polyfilled in any shape or form on IE9/10, the browser vendor who must not be named will be forced to jump on your suggested and beautiful W3C submissions. Otherwise there are plenty of reasons and forces at work to make this another WebGL or Dart. This will make a great deal of ISVs target the web rather than the desktop for many categories of applications. – Morrie

The shim is very impressive...I wonder, is it a viable option for websites that need to be mobile-friendly? I'm sure there must be a performance hit involved in maintaining the shadow DOM. – Corinacorine

Yes, there is a performance cost for polyfilling shadow DOM, but we don't have any hard numbers yet. All the development is out in the open, so we will share any data we generate. The hope is that when used in concert with other technologies like Custom Elements and MDV, the usage patterns will tend to provoke the polyfill less frequently. – Saari

This sounds great! How is browser support for it? Does it support IE8? Mobile browsers? – Badman