Tại sao biểu tượng sắt Polymer của tôi xuất hiện bên dưới đầu vào giấy của tôi trên điều hướng?

Question

Tôi có một số mã đơn giản (Angular2 + Polymer) tạo ra một paper-input với một iron-icon như một suffix biểu tượng:

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

Đây là trang đầy đủ, lưu ý rằng các lớp lưới materialize và hàng là các lớp học chỉ hiện thực tôi đưa vào dự án:

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

này trông khá tốt trên tải trang:

Khi tôi rời khỏi trang và trở lại, tuy nhiên, biểu tượng giảm xuống dưới đầu vào:

Trong html bạn có thể thấy rõ rằng biểu tượng được đặt bên ngoài của paper-input-container trên menu.

Có ai nhìn thấy điều này trước đây không? Tôi đang thua lỗ. Một điều cần lưu ý là điều này chỉ xảy ra khi tôi sử dụng webcomponents-lite.js trong tệp index.html của mình. webcomponents.js có các vấn đề khác khi được sử dụng (không nên sử dụng) nhưng đây không phải là một trong số chúng. Đây là Polymer 1.0. Cảm ơn!

Edit:

Đây là không một vấn đề trong Chrome, nhưng trong các trình duyệt lớn khác.

Dưới đây là hàng nhập khẩu của tôi trong trường hợp họ có liên quan:

<!-- 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"> 

Dưới đây là bower.json phụ thuộc của tôi:

"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>