Полимерный удлинитель ввода

Question

Я довольно новичок в Polymer, поэтому прошу прощения, если я делаю что-то глупое, но это не будет работать должным образом.

<polymer-element name="x-input" extends="input" noscript>
  <template>
    <style>
        :host {
            width: 100%;
            padding: 10px;
            display: inline-block;
        }
    </style>
  </template>
</polymer-element>

<!-- Using x-input -->
<input is="x-input" />

Я могу стилизовать его, но по какой-то причине не могу его набрать. Есть идеи?

Вот скрипка: http://jsfiddle.net/t48phqdz/1/

Answer 1

Я тоже не эксперт, но вы решили сделать это так же, как в core-input? https://github.com/Polymer/core-input/blob/master/core-input.html

Я сделал обновление в вашем jsfiddle: http://jsfiddle.net/kreide/t48phqdz/2/

Вот также фрагмент:

<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="x-input" extends="input" noscript>
    <style>
        input[is=x-input] {
            width: 100%;
            padding: 10px;
            display: inline-block;
        }
    </style>
</polymer-element>
<input is="x-input"></input>

PS: могу ли я спросить вас о причине расширения ввода? Если речь идет только о стилизации, я бы предложил использовать paper-input-decorator,