Auto binding template not stamped when async import is used to load polymer

[ebidel]

If one makes their main page import that loads polymer.html async, e.g. <link rel="import" href="elements.html" async>, auto binding templates on the page do not stamp their content.

[ebidel]

Current workaround:

function importLoaded(e) {
  document.querySelector('template[is="dom-bind"]')._readySelf();
}
<link rel="import" href="..." async onload="importLoaded(event)">

[sorvell]

It looks like this only occurs on Chrome when WebComponents polyfill (webcomponents-lite.js) is not loaded. Can you confirm?

ok: http://jsbin.com/cahuha/1/edit?html,output
not working: http://jsbin.com/wubulo/edit?html,output

[ebidel]

Yep confirmed. I'm dynamically loading the polyfill based on feature detection, which means Chrome is never getting it. Confirmed your bins too.

[sorvell]

Thanks. There is an easy fix that will get the dom-bind to stamp, but there will be some issues that are worth a bit of discussion.

The reason that dom-bind does not stamp immediately is that it's a requirement that all custom elements used inside the dom-bind are available when the template stamps. Otherwise, bindings may propagate property values to un-upgraded elements that go unseen when the element is upgraded. This is, perhaps, unlikely (a value comes out of an upgraded element and is routed into an un-upgraded one), but it can happen.

Our typical strategy is to simply wait for HTMLImports to resolve before stamping the dom-bind. However, this is not a generally knowable state when async imports are used.

We could simply not provide any help for this situation when async imports are used (always stamp if the dom-bind is created after document.readyState === 'complete'. This is the easy fix).

Alternatively, we can attempt to see if any currently existing imports are loaded and wait for them to load if not. Unfortunately, HTML Imports currently gives no way to distinguish that an import has already 404'd. In that case this strategy would fail.

Another option is simply to make users stamp the dom-bind themselves in this case. If we go with this, then a public stamp method is necessary.

[ebidel]

I'd be happy with a public method for stamping. I suppose if someone is already going the async route, they're probably comfortable/interested in full control.

[sorvell]

Closed via #2090. The dom-bind element now has a render method which can be called when using async imports.

[Frikki]

@sorvell So instead of @ebidel’s fix:

document.querySelector('template[is="dom-bind"]')._readySelf();

we should substitute the _readySelf() with render()? Like this:

document.querySelector('template[is="dom-bind"]').render();