Question

在此jsbin中，如何更新元素的内容并添加类？

this.$.content.innerHTML = "Changed?"和this.classList.add('new')似乎不起作用。

jsbin中的代码如下：

<!DOCTYPE html>
<html>
<head>
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>
<body>
  <my-element>Some text</my-element>
  <dom-module id="my-element">
    <template>
      <style>
        :host {
          background: lightgrey;
        }
        .new {
          background: blue;
        }
      </style>
      <content>
      </content>
      <button on-tap="make">Make blue</button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'my-element',
          make: function() {
            this.$.content.innerHTML = "Changed?";
            this.classList.add('new');
          }
        })
      })
    </script>
  </dom-module>
</body>
</html>

Answer 1

这就是诀窍：

:host.new {
  background: blue;
}
...
make: function() {
  this.classList.add("new");
  Polymer.dom(this).innerHTML = "changed?";
}

如何更新Polymer组件中的内容和类？

1 个答案: