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

我是聚合物新手，我需要你的帮助。我想创建这样一个简单的元素：

，如果可以像这样更改元素的背景颜色，我会更喜欢：

我试过这样的方法：

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

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

div{高度：70px；宽度：60px；}
聚合物({
是：“我的自定义元素”，
特性：{
背景颜色：{`
类型：字符串，
值：#fff，
通知：正确
}
},
已创建：函数（）{
this.style.background=this.backgroundcolor；
}
})
`

---

但这并没有锻炼身体。请问我如何才能做到这一点。谢谢你

你需要让它知道什么是“this”，我猜是div，但是你也可以按类或ID来做（这种方式只会在遇到符合条件的第一件事情时做）

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

编辑：

一些最佳实践会让您的代码如下所示：

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

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

#某物{
高度：70像素；
宽度：60px；
}
聚合物({
是：“我的自定义元素”，
特性：{
背景颜色：{
类型：字符串，
值：#fff，
通知：正确
}
},
就绪：函数（）
{
Polymer.dom（this.root）.querySelector（“#someid”）.style.background=this.backgroundcolor；
}
})
`

谢谢，这很有效！不过需要做一点小小的更改，创建的

必须更改为
就绪
callback@osa如果您将该代码附加到观测者的
backgroundcolor
属性，这样每次更改时它都会更改其背景色，实际上会更好。