content reprojection does not work when elements inserted programmatically

[yjbanov]

This does not work:

var tabs = document.createElement('paper-tabs');
document.body.appendChild(tabs);
var tab = document.createElement('paper-tab');
tabs.appendChild(tab);

tab is not projected into the correct location; instead, it remains a direct child of the paper-tabs element.

This, however, works:

var container = document.createElement('div');
container.innerHTML = '<paper-tabs><paper-tab></paper-tab></paper-tabs>';
document.body.appendChild(container);

This breaks integration with Angular 2, as Angular 2 inserts elements using the first method, not the second method.

[jakemac53]

In polymer you have to use the polymer Dom APIs for the sort of thing to work. For instance Polymer.Dom(tabs).append(tab). This almost certainly causes issues with angular still, I don't know if the polymer JS guys have any ideas...

[jakemac53]

Just to confirm, this is with the new polymer not the old polymer right?

[yjbanov]

It's whatever is in g3 right now, but I just checked on polymerjs 1.0 (using their demo app) and it's reproducible.

[tbosch]

@jakemac53 How would a react application use the tabs polymer components?

[tbosch]

Does Polymer.Dom(tabs) work with plain html elements as well?

[jakemac53]

Are you testing with Polymer JS in g3 or Polymer Dart? Polymer Dart is still on the old version, which should work (but will be migrated in soon). Polymer JS has both versions currently.

Here is a related but old Polymer JS issue https://github.com/Polymer/polymer/issues/1405 which points to https://github.com/PolymerLabs/polymer-experiments/blob/master/patch-dom.html as a possible solution.

[jakemac53]

also @tbosch yes Polymer.dom(tabs) works with any element, polymer or otherwise.

[tbosch]

Cool, thanks for the link