Question

我正在尝试创建一个扩展<paper-input-decorator>的自定义Polymer元素。内涵是有一个输入字段，只允许某种格式的数字，比如邮政编码字段。所以为了达到这个目的，我扩展了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将自动绑定。希望它有所帮助。

我的自定义聚合物元素无法渲染

1 个答案: