localTarget and event-retargeting doesn't work when paper-drawer-panel is nested

[jaichandra]

Description

If paper-drawer-panel is wrapped inside another element and if we try to pass the elements through the node, it doesn’t work. This is happenning because the localTarget reference in the _onTap method of paper-drawer-panel changes when the element is wrapped inside another. Is this a bug with the element or with event-retargeting itself.

Expected outcome

paper-drawer-panel should work irrespective of how it is used. So are all other elements.

Actual outcome

the event target reference is broken and it doesn't work any more.

Live Demo

https://jsfiddle.net/kleptomac/4Lbfrte2/

Steps to reproduce

1. Click on the app icon. The drawer doesn't open.
2. Replace <content></content> in the x-base element (above example) with <paper-icon-button icon="apps" paper-drawer-toggle></paper-icon-button> and the component works.

Browsers Affected

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

[jaichandra]

found the same issue reported here: https://github.com/Polymer/polymer/issues/2374 This is related as well: https://github.com/Polymer/polymer/issues/1921

[jaichandra]

This is a bug with ShadyDOM. The above example works if I enable ShadowDOM https://github.com/Polymer/polymer/issues/1921#issuecomment-282802436

[jaichandra]

Issue to track: https://github.com/Polymer/polymer/issues/4341