Мой пользовательский полимерный элемент не удается отобразить

Question

Я пытаюсь создать собственный полимерный элемент, который расширяет <paper-input-decorator>. Цель состоит в том, чтобы иметь поле ввода, которое допускает только определенный формат чисел, например поле для почтовых кодов. Чтобы добиться этого, я расширил документ-декоратор и объявил внутри него, но на экране ничего не отображается. Код пасты находится здесь: http://ur1.ca/jr70c

Answer 1

Вы делаете это неправильно. Прежде всего, paper-input-decorator делает много вещей в его теневом доме. Если вы хотите, чтобы видеть это, вы должны включать родительскую тень в шаблоне:

<template> 
    <link rel="stylesheet" href="ng-phone.css"> 
    <input is="core-input"> 
    <!-- ⇓⇓⇓⇓⇓⇓⇓⇓ --> 
    <shadow></shadow> 
</template> 

Хотя теперь вы можете видеть, как вход и декоратор, результат не будет отвечать вашим потребностям: вход помещается выше декоратор. Довольно предсказуемо.

Вместо того, чтобы расширить декоратор, вы должны создать свой собственный элемент и использовать декоратор в шаблоне, как показаны на documentation:

<polymer-element name="my-phone" attributes="myLabel"> 
    <template> 
    <paper-input-decorator label="{{myLabel}}"> 
     <input is="core-input"> 
    </paper-input-decorator>  
    </template> 
    .... 

myLabel выше будет автоматически привязаны. Надеюсь, поможет.