styling polymer element in angular2

Question

I want to include Polymer Elements into my angular2 App since Angular2 Material still doesn't provide enough elements. Additionally, I want to style the element, i.e. setting the width of it. I have

<paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right">
    <paper-listbox class="dropdown-content">
        <paper-item>einmalig</paper-item>
        <paper-item>wöchentlich</paper-item>
        <paper-item>monatlich</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

EDIT

in my index.html I have

<!-- polymer components -->
<script src="/node_modules/bower_components/webcomponentsjs/webcomponents.js"></script>
<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

<link rel="import" href="/node_modules/bower_components/polymer/polymer.html">

<!-- custom style for polymer components -->
<style is="custom-style">
    :root {
        --paper-dropdown-menu : {
            width: 280px;
        }
    }
</style>

<link rel="import" href="/node_modules/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/node_modules/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/node_modules/bower_components/paper-item/paper-item.html">
<link rel="import" href="/node_modules/bower_components/paper-input/paper-input.html">

Interestingly, I can change the with to i.e. 100px and it will be applied. But it won't get higher than ~250px;

Answer 1

Having this in my index.html solved my problem:

<script src="https://polygit.org/polymer+:master/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script>
/* this script must run before Polymer is imported */
window.Polymer = {
  dom: 'shadow',
  lazyRegister: true
};
</script>
<link href="https://polygit.org/polymer+:master/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-button/paper-button.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-item/paper-item.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-listbox/paper-listbox.html" rel="import">
<link href="https://polygit.org/polymer+:master/components/paper-menu/paper-menu.html" rel="import">

<style is="custom-style">
    :root {
      --paper-dropdown-menu : {
        width: 280px;
      }
    }
</style>

Answer 2

You can use such a style element in index.html

<style is="custom-style">
  :root {
    --paper-dropdown-menu: {
      /* add styles here */
    }
  }
</style>

or you can wrap your Polymer elements in a custom Polymer element including the style for the wrapped HTML

<style>
  :root {
    --paper-dropdown-menu: {
      /* add styles here */
    }
  }
</style>

<paper-dropdown-menu class="dropdown" label="Wiederholung" vertical-align="bottom" horizontal-align="right">
    <paper-listbox class="dropdown-content">
        <paper-item>einmalig</paper-item>
        <paper-item>wöchentlich</paper-item>
        <paper-item>monatlich</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

and then use it like this in you Angular component

<some-name></some-name>

A few posts that explain some topics about how to use Polymer with Angular2

• https://dart.academy/dart-angular-2-and-polymer-together/
• https://dart.academy/polymer-controls-in-an-angular-2-form-with-dart/- https://dart.academy/two-way-binding-for-polymer-elements-in-angular-2-for-dart/

these tutorials are for Polymer.dart with Angular2 for Dart but it shouldn't be too hard to apply the information to Polymer.js with Angular2 with TS.