Polymer paper-dropdown-menu not rendered correctly in browser

Question

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.

Clicking the rendered paper-input component (part of the rendered dropdown) does animate the ripple, but does not animate the show/hide of the menu and menu items. Clicking an item in the list causes the list to disappear, but clicking the dropdown again does not make the list re-appear.

After examining the rendered html and comparing it with the same rendered demo html, I found that the paper-listbox and contained paper-items are rendered well outside of the iron-dropdown element where they should be. This causes all the non-functionality. By using the inspector and grabbing the paper-listbox html and moving it inside of the iron-dropdown fixes everything and the dropdown functions as expected.

What is causing the listbox to be rendered out of place?

Here is what the HTML that WORKS for a paper-dropdown-menu should look like:

...
<iron-dropdown id="dropdown" class="style-scope paper-menu-button" aria-disabled="false" horizontal-align="right" vertical-align="top" style="outline: none; z-index: 103; margin-bottom: 8px; margin-top: 8px; position: fixed; left: 137.938px; top: 317px;">
  <div id="contentWrapper" class="style-scope iron-dropdown">
    <div class="dropdown-content style-scope paper-menu-button" style="transform-origin: 0px 0px 0px; box-sizing: border-box; max-width: 104.063px; max-height: 218px;">
      <paper-listbox role="listbox" tabindex="0" class="dropdown-content x-scope paper-listbox-0 x-scope paper-listbox-0" aria-expanded="true">
          <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">CRV-6</paper-item>
          <paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">M3 Turbo</paper-item>
          <paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">919 Turbo</paper-item>
          <paper-item role="option" tabindex="-1" aria-disabled="false" class="x-scope paper-item-0 x-scope paper-item-0">300</paper-item>
      </paper-listbox>
    </div>
  </div>
</iron-dropdown>
</paper-menu-button>
</paper-dropdown-menu></div>

Working dropdown menu

But instead I see the following that DOES NOT WORK:

...
   <iron-dropdown id="dropdown" class="style-scope paper-menu-button" aria-disabled="false" aria-hidden="true" horizontal-align="right" vertical-align="top" style="outline: none; display: none;">
    <div id="contentWrapper" class="style-scope iron-dropdown">
      <div class="dropdown-content style-scope paper-menu-button">
      </div>
    </div>
  </iron-dropdown>
  </paper-menu-button>

    <paper-listbox role="listbox" tabindex="0" class="dropdown-content x-scope paper-listbox-0">
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">CRV-6</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">M3 Turbo</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">919 Turbo</paper-item>
      <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">300</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>
</div>

Not working dropdown. Shows as list of items

Manually pushing the paper-listbox element and children into the div.dropdowncontent makes the control work perfectly. Also interesting, is making some seemingly non-descript white-space changes (in the inspector) causes a re-render of the section and either the whole paper-dropdown-menu element and children are removed, or the paper-listbox gets re-rendered in the correct place and the control works.

Any idea what could be driving the listbox element out of place?

Here is the source page.component.html that renders the dropdown

<div class="row">
  <div class="col col-xs-12">
    <paper-dropdown-menu label="Vehicle Model">
      <paper-listbox class="dropdown-content">
        <paper-item>CRV-6</paper-item>
        <paper-item>M3 Turbo</paper-item>
        <paper-item>919 Turbo</paper-item>
        <paper-item>300</paper-item>
      </paper-listbox>
    </paper-dropdown-menu>
  </div>
</div>

And the index.html with the references:

<!DOCTYPE html>
<html>
<head>
    <title>Permit Management</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>
    <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.min.js"></script>
    <script src="node_modules/moment/moment.js"></script>
    <script src="node_modules/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
    <script src="lib/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

    <link rel="import" href="lib/paper-button/paper-button.html" />
    <link rel="import" href="lib/paper-input/paper-input.html" />
    <link rel="import" href="lib/paper-item/paper-item.html" />
    <link rel="import" href="lib/paper-menu/paper-menu.html" />
    <link rel="import" href="lib/paper-menu-button/paper-menu-button.html" />
    <link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" />
    <link rel="import" href="lib/paper-listbox/paper-listbox.html" />
    <link rel="import" href="lib/paper-checkbox/paper-checkbox.html" />
    <link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" />
    <link rel="import" href="lib/paper-progress/paper-progress.html" />
    <link rel="import" href="lib/paper-spinner/paper-spinner-lite.html" />
    <link rel="import" href="lib/gold-phone-input/gold-phone-input.html" />

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
        .then(null, console.error.bind(console));
    </script>
    <style is="custom-style">
      #permitOwner {
        --paper-input-container-input: {
          font-size: 30px;
          padding-left: 20px;
          cursor: pointer;
          };
      }
      #permitHolder {
        --paper-input-container-input: {
          padding-left: 20px;
          cursor: pointer;
      };
    }
    .plate-entry {
        --paper-input-container-input: {
            text-transform: uppercase;
        };
    }
</style>

<base href="/" />
</head>
<!-- 3. Display the application -->
<body>
    <permit-manager-app>Loading...</permit-manager-app>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles.css">
  </script>
</body>
</html>

bower.js package versions:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "polymer": "^1.5.0",
    "webcomponentsjs": "^0.7.21",
    "paper-button": "^1.0.11",
    "paper-input": "^1.1.10",
    "paper-progress": "^1.0.9",
    "paper-dropdown-menu": "^1.2.1",
    "paper-menu": "^1.2.2",
    "paper-item": "^1.2.1",
    "paper-listbox": "^1.1.2",
    "paper-checkbox": "^1.2.0",
    "paper-toggle-button": "^1.1.2",
    "gold-phone-input": "^1.0.9",
    "tether": "^1.3.2",
    "tether-tooltip": "^1.2.0",
    "requirejs": "^2.2.0",
    "paper-spinner": "^1.1.1",
    "web-animations-js": "^2.2.1"
  },
  "resolutions": {
    "polymer": "^1.1.0"
  }

ADDITIONAL INFO:

The paper-dropdown-menu renders and functions fine from the index.html. However does not from within a component and router-outlet.

Answer 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.