Warum erscheint mein Polymer-Eisen-Symbol unter meiner Papiereingabe bei der Navigation?

Question

Ich habe einige einfachen Code (Angular2 + Polymer), die eine paper-input mit einem iron-icon als suffix Symbol erstellt:

<paper-input type="text" [control]="email" label="Email"> 
     <iron-icon suffix icon="mail"></iron-icon> 
</paper-input> 

Hier ist die ganze Seite, beachten Sie, dass die materialisieren Raster und Zeilenklassen sind die einzigen materialisieren Klassen ich brachte in das Projekt:

<div class="section"> 
    <h1 class="paper-font-headline">Admin Registration</h1> 

    <div class="row"> 
     <div class="col s12 m6 6"> 
      <p class="paper-font-body2">some stuff here</p> 
     </div> 

     <div class="col s12 m6 6"> 
      <paper-card class="stretch"> 
       <div class="sub-section"> 
        <form> 
         <paper-input type="text" 
            [control]="email" 
            label="Email"> 
          <iron-icon suffix icon="mail"></iron-icon> 
         </paper-input> 
        </form> 
       </div> 
      </paper-card> 
     </div> 
    </div> 
</div> 

Diese auf Seite Last ziemlich gut aussieht:

Wenn ich von der Seite und zurück navigieren weg fällt jedoch das Symbol unter der Eingabe:

Im html man deutlich sehen kann, dass das Symbol außerhalb der paper-input-container auf der Navigation gelegt wird.

Hat jemand das schon mal gesehen? Ich bin ratlos. Eine Sache zu beachten ist, dass dies nur geschieht, wenn ich webcomponents-lite.js in meiner index.html Datei verwende. webcomponents.js hat andere Probleme bei der Verwendung (sollte nicht verwendet werden), aber das ist keiner von ihnen. Dies ist Polymer 1.0. Vielen Dank!

Edit:

Dies ist nicht ein Problem in Chrome, aber in den anderen gängigen Browsern.

Hier sind meine Importe im Fall sie sind relevant:

<!-- 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="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
    <script> 
     window.Polymer = window.Polymer || {}; 
     window.Polymer.dom = 'shadow'; 
    </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/http.dev.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 

    <link rel="import" href="bower_components/paper-styles/classes/global.html"> 
    <link rel="import" href="bower_components/paper-styles/classes/shadow.html"> 
    <link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html"> 
    <link rel="import" href="bower_components/paper-styles/classes/typography.html"> 

    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="bower_components/paper-menu/paper-menu.html"> 
    <link rel="import" href="bower_components/paper-item/paper-item.html"> 
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" href="bower_components/iron-icon/iron-icon.html"> 
    <link rel="import" href="bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" href="bower_components/paper-ripple/paper-ripple.html"> 
    <link rel="import" href="bower_components/paper-card/paper-card.html"> 
    <link rel="import" href="bower_components/paper-input/paper-input.html"> 

Hier sind meine bower.json Abhängigkeiten:

"dependencies": { 
    "webcomponentsjs": "~0.7.21", 
    "polymer": "Polymer/polymer#~1.3.0", 
    "paper-elements": "PolymerElements/paper-elements#~1.0.7" 
    } 

Answer 1

<link rel="import" href="../paper-input/paper-input.html"> 
<link rel="import" href="../core-icons/core-icons.html"> 
<link rel="import" href="../core-icon/core-icon.html"> 

<polymer-element name="my-element"> 

    <template> 
    <style>  
     #paper_input { 
     left: 380px; 
     top: 380px; 
     position: absolute; 
     } 
     #core_icon { 
     left: 530px; 
     top: 390px; 
     position: absolute; 
     } 
    </style> 
    <paper-input label="Type something..." id="paper_input"></paper-input> 
    <core-icon icon="mail" id="core_icon"></core-icon> 
    </template> 

    <script> 

    Polymer({ 

    }); 

    </script> 

</polymer-element>