paper-checkbox fails to render properly in Ember

[jaichandra]

Description

paper-checkbox and paper-radio-button fails to render properly when transitioning between routes (navigate between 'index' and 'about' routes). Initially the components render fine, but after transitioning to another route and coming back, the components are broken. Here's the working example where you can see the issue. http://codepen.io/jaichandra/pen/jrOpab?editors=1010

I am raising this issue here because paper-button and paper-input are working fine. Also, if I switch to Shadow DOM, the components work.

If you look at the rendered paper-checkbox dom, it get re-rendered inside one of its own nodes (after route transition), causing it to render two checkboxes and break. Same is the case with paper-radio-button.

Expected outcome

paper-checkbox should render correctly

Actual outcome

paper-checkbox ui breaks after transitioning between 'index' and 'about' routes

Live Demo

http://codepen.io/jaichandra/pen/jrOpab?editors=1010

Steps to reproduce

In the above example,

1. Click on 'about' link
2. Click again on 'index' route

   Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Safari 9
• [x] Safari 8
• [x] Safari 7
• [x] Edge
• [x] IE 11
• [x] IE 10

[github-polymer-user]

All works perfectly:

Because of shadow DOM nature, you have to put everything you need into a Polymer component and initialize it:

http://codepen.io/github-polymer-user/pen/jrWyrp

[github-polymer-user]

Close issue, @robdodson

[jaichandra]

But, paper-checkbox and paper-radio-button is already a Polymer component. Why can't I use it as is? paper-button and paper-input works fine if used directly. This still looks like an issue, in that case.

[jaichandra]

But, Im glad this workaround works.

[jaichandra]

Updated above example with two more wrapper components for paper-checkbox - x-foo and x-foo-content. x-foo wraps paper-checkbox and doesn't use <content> tag. That one works fine. x-foo-content wraps paper-checkbox the same way but adds a <content> tag, and we see that it breaks again once we navigate to about and back to index route. http://codepen.io/jaichandra/pen/jrOpab?editors=1010

May be this is related to below issue: https://github.com/Polymer/polymer/issues/3706

[jaichandra]

Is this issue and #3706 just waiting for Polymer 2.0? Is going to fix this?