Question

我是聚合物的新手，我需要你的帮助。我想创建一个这样的简单元素：<my-custom-element></my-custom-element>我希望如果可以改变元素的背景颜色：<my-custom-element backgroudcolor="#000"></my-custom-element>。

我试过这样的事情：

<dom-module id=“my-custom-element”>
    <template>
       <style>div{height:70px; width:60px;}</style>
       <div></div>
    </template>
    <script>
        Polymer({
          is: “my-custom-element”,
          properties: {
            backgroundcolor : {`
              type: String,
              value: #fff,
              notify: true
             }
          },
          created: function(){
            this.style.background = this.backgroundcolor;
          }
       })
  </script>`
</dom-module>

但是没有锻炼。请问我该如何实现这一目标。谢谢

Answer 1

你需要让它知道'这个'是什么，我猜它是div，但你也可以通过类或ID来做到这一点（这种方式只会对它遇到的第一件事情做到这一点）符合标准

Polymer.dom(this.root).querySelector("div").style.background = this.backgroundcolor

编辑：

一些最佳实践会使您的代码看起来像这样：

<dom-module id=“my-custom-element”>
   <style>
     #someid {
       height:70px; 
       width:60px;
     }
   </style>
   <template>
       <div id="someid"></div>
    </template>
    <script>
        Polymer({
          is: “my-custom-element”,
          properties: {
            backgroundcolor : {
              type: String,
              value: #fff,
              notify: true
             }
          },

          ready: function()
          {
            Polymer.dom(this.root).querySelector("#someid").style.background = this.backgroundcolor;
          }
       })
  </script>`
</dom-module>

如何使用可用于设置样式的属性创建自定义元素

1 个答案: