Bindings in icon-button fail under ShadowDOMPolyfill

[sorvell]

See the example here: workbench/icon-button.html?debug&shadow=polyfill

There are 3 icon-buttons, but only one has the expected image.

This breakage was caused when MDV's creation hook was implemented in the platform repo to upgrade elements (https://github.com/toolkitchen/platform/blob/master/lib/patches-loaded.js#L10).

The expected behavior is that icon-button's src property is bound to icon's src property and that is bound to a div with its style attribute set to "background-image: url({{src}}) ...".

When stepping through the ShadowDOM polyfill code here https://github.com/toolkitchen/ShadowDOM/blob/master/src/wrappers/Element.js#L41, the last call to setAttribute has the expected value and the wrapped node's style attribute has the expected value. This call is a result of the dirtyCheck called when the "WebComponentsReady" event is fired.

At that time, the real node in question is not in document. It is in a document fragment owned by a document without a defaultView. The url is resolve at that time and evaluates to an unexpected value.

We can avoid this problem by ensuring we do not dirtyCheck before shadowDOM distribution occurs. More generally, MDV could, perhaps, avoid processing bindings on nodes without a browsing context.

[sorvell]

This issue is due to the way css is evaluated in created documents.

It should be addressed in HTML Imports.