Polymer：加载动态内容时重新加载样式

Question

我使用<style include="style-name"></style> 包含样式，这通常可以正常工作。

但是，我有一个元素可以通过 JavaScript 动态加载和更改其内容。它会在某个时候从某个外部源加载新内容并相应地更新其内容。这些新内容没有应用style-name 的样式。

如何让 Polymer 重新评估样式，从而将它们应用到新内容中？

---

如果有影响的话，我正在使用 Meteor + Synthesis。

Answer 1

为了保持样式范围，您应该使用 Polymer importHref() 和 dom() 函数，如下所示：

// ...
let importSource = Polymer.Base.importHref('path/to/external-source',
// Import is done, use the body of that
event => {
    // #container is my element which should have the content
    // but you can change to any element what you want
    // or use just the this.root
    Polymer.dom(this.$.container).innerHTML = importSource.import.body;
},
// Handle errors
event => console.error(event));
// ...

如果您使用 Shady DOM，这种方式聚合物将应用样式范围，在 Shadow DOM 中它应该默认工作，但我没有测试，所以最好使用 Polymer 内置函数。

Polymer.updateStyles() 仅在您像这样更改本地 DOM css 变量时才有效：this.customStyle['--my-toolbar-color'] = 'blue';