not working properly inside angular 2

[surenrao]

Description

paper-dropdown-menu, paper-listbox is not rendering properly inside angular2

Expected outcome

after clicking the paper-dropdown-menu element, a dropdown should popup and clicking an option should show selected value

Actual outcome

without clicking anything, it shows the options, and clicking the option hides it.

Live Demo

https://embed.plnkr.co/pKksem60YSlzMlJzi9CD/ example shows rc.3, but its also reproducable in rc4

Steps to reproduce

just include the paper-dropdown-menu, paper-listbox inside angular2 component.

Browsers Affected

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

[tstephansen]

I have this same issue. Did you manage to find a workaround?

[surenrao]

Yeah i did. Need to enable shadow dom.

<script> window.Polymer = window.Polymer || {}; window.Polymer.dom = 'shadow'; </script>

[tstephansen]

Thanks! That's exactly what I was missing. I saw that somewhere but I didn't realize it was related to the issue I was having. I've been using Angular and I am starting a new project so I figured I'd learn Angular 2. I was less than satisfied with the Angular Material 2 project so I figured I'd learn Polymer as well. That's what I get for trying to learn both at the same time.

Also, a note for anyone who encounters this in the future but hasn't used polymer before. This needs to be placed right after the web components polyfill and before any polymer elements are loaded.

<script src="~/lib/webcomponentsjs/webcomponents.min.js"></script>
<script type="text/javascript">
    window.Polymer = window.Polymer || {}; 
    window.Polymer.dom = 'shadow';
</script>
<link rel="import" href="~/lib/polymer/polymer.html"/>

[dman777]

There is Polycast video where the Polymer team states not to mix Angular with Polymer. Not sure if that goes for both versions of Angular.