Polymer 1.0 dropdowns not showing in custom elements - polymer

Question

I'm using the paper-dropdown-menu in several places in a polymer app. It works great in the topmost file (index.php). But somehow it doesn't work in all custom elements. I must be doing something wrong as I can't find anyone else online complaining about this issue. Could someone take a look at this element and tell me if it's correct?
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../users-data/users-data.html">
<link rel="import" href="../../styles/shared-styles.html">
<dom-module id="account-user-add">
<template>
<style include="shared-styles">
:host {
display: block;
}
*, ::after, ::before {
box-sizing: border-box;
}
</style>
<users-data users="{{users}}"></users-data>
<paper-card>
<div class="card-content">
<!-- Contact photo area -->
<div class="row padded">
<div class="col s4 m3 l2">
<img class="circle responsive-img" src="[[user.avatar]]">
</div>
<div class="col s8 m9 l10 padded">
<h3>
<span>[[user.firstName]]</span>
<span>[[user.lastName]]</span>
</h3>
<div class="layout horizontal">
<span>[[user.group]]</span> · <span>Active</span>
</div>
</div>
</div>
<!-- Contact form -->
<div id="contactForm">
<!-- Group -->
<div class="formRow layout horizontal">
<paper-dropdown-menu class="flex" label="Permission level">
<paper-menu attr-for-selected="value" selected="{{user.group}}" class="dropdown-content">
<paper-item value="Admin">Admin</paper-item>
<paper-item value="User">User</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
<!-- Name -->
<div class="formRow layout horizontal">
<paper-input value="{{user.firstName}}" class="item item-input flex" label="First name"></paper-input>
<paper-input value="{{user.lastName}}" class="item item-input flex" label="Last name"></paper-input>
</div>
<!-- Avatar -->
<div class="formRow layout horizontal">
<paper-input value="{{user.avatar}}" class="item item-input flex" label="Avatar"></paper-input>
</div>
<!-- Phone -->
<div class="formRow layout horizontal">
<paper-input value="{{user.telephone}}" class="item item-input flex" label="Phone"></paper-input>
</div>
<!-- Email -->
<div class="formRow layout horizontal">
<paper-input value="{{user.email}}" class="item item-input flex" label="Email"></paper-input>
</div>
<!-- Address -->
<div class="formRow layout horizontal">
<paper-input value="{{user.address}}" class="item item-input flex" label="Address"></paper-input>
</div>
<!-- Save -->
<div class="formRow buttons">
<paper-button on-tap="_saveUser" raised><iron-icon icon="save"></iron-icon> Save</paper-button>
</div>
</div>
</div>
</paper-card>
</template>
<script>
(function() {
//'use strict';
Polymer({
is: 'account-user-add',
properties: {
users: {
type: Array
},
user: {
value: {},
type: Object
}
},
_saveUser: function (event) {
this.push('users', this.user);
this.user = {};
page('/account-users');
}
});
})();
</script>
</dom-module>

Answer 1

It seems to work when you isolate the paper-dropdown-menu in a simple file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
</head>
<body>
<dom-module id="account-user-add">
<template>
<paper-card>
<div class="formRow layout horizontal">
<paper-dropdown-menu class="flex" label="Permission level">
<paper-menu attr-for-selected="value" class="dropdown-content">
<paper-item value="Admin">Admin</paper-item>
<paper-item value="User">User</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
</paper-card>
</template>
<script>
Polymer( {
is: "account-user-add"
} )
</script>
</dom-module>
<account-user-add>
</account-user-add>
</body>
</html>

Answer 2

That's odd. It seems to work in This example
I did nothing, but posting your code and add element-party that every import works. Maybe you could check those?