paper-radio-button fails to render properly in Ember

[jaichandra]

Description

paper-radio-button and paper-checkbox 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-radio-button dom, it get re-rendered inside one of its own nodes (after route transition), causing it to render two radio-buttons and break. Same is the case with paper-checkbox.

Expected outcome

paper-radio-button should render correctly

Actual outcome

paper-radio-button 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]

I should have probably referred this to the below issue. Please refer to comment here: https://github.com/PolymerElements/paper-checkbox/issues/151#issuecomment-246578215