When using shady DOM and programmatically inserting children the element will not render itself properly

[jarrodek]

Description

The paper-listbox will not render children (at least paper-item) properly when inserted programmatically and when shady DOM is used.

Expected outcome

To see items (in this case paper-items) in the listbox.

Actual outcome

2 cases, both when shady DOM (It will work properly with shadow DOM):

1) When trying to us it with paper-dropdown-menu, paper-items are rendered outside the listbox, when clicked on any paper-item they disappear and dropdown isn't working (will not render dropdown list).

2) When just creating paper-listbox with paper-items, items initially are inserted as a child of the listbox but after clicking on any item they are removed from the DOM.

Live Demo

https://jsbin.com/cuwomew/edit?html,js,output

Steps to reproduce

See demo, it's self explanatory.

Browsers Affected

I only have Chrome so at least it.

[EmmanuelMartinez]

I have the same problem with paper-dropdown-menu you came to the solution?

If I remove the import it shows, but the selection does not work

[satyanath]

I am also facing this issue. Any update on this?

[Lizee1211]

This answer is probably late. But in case other people also stumble across this issue, the solution is to use the Polymer DOM API

So instead of using appendChild directly, you would have to do this: Polymer.dom(parent).appendChild(node)