Polymer Paper-dropdown-menu Not Rendered Correctly In Browser

I am having an issue with the rendered html for a simple paper-dropdown-menu. The list items do not appear as a styled 'menu', but rather just a list of items appearing on the page

Solution 1:

This is due to how Polymer works with Shadow DOM. Even though some browsers support Shadow DOM natively, by default Polymer works in the “Shady DOM” mode. It doesn’t use Shadow DOM, but places the elements’s local DOM in a regular DOM tree, while applying scoping for the styles.

Unfortunately, this requires developers to always use Polymer.dom accessors to manipulate the DOM contents of Polymer elements. Angular 2 doesn’t know about that. In Angular 2 applications, component HTML templates are first compiled to JavaScript and then placed in DOM using regular browser DOM APIs.

To resolve this, you can try using Vaadin Angular2-Polymer package. It patches Angular 2 DomAdapter to use Polymer accessor functions for DOM manipulations. This keeps Polymer’s in-memory logical DOM tree in the right state and thus fixes the issue. I would recommend this way, the package also solves some other compatibility issues, such as: two-way data binding, styling and ngForm support.

Alternatively, you can switch Polymer to Shadow DOM mode by adding a line <script>window.Polymer = { dom: 'shadow' };</script> just after the webcomponentsjs script in the section. On the downside, in this mode it is required to have a support for Shadow DOM in browsers, either natively or with a full webcomponents.js polyfill, which has a performance impact.