如何更新聚合物組件中的內容和類？

看來，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>

來源

2016-07-27 rraallvv

這奏效了：

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

來源

2016-07-28 02:17:30 rraallvv

如何更新聚合物組件中的內容和類？

回答

相關問題