css - polymer :加载动态内容时重新加载样式

我包括使用<style include="style-name"></style>的样式，通常效果很好。

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

如何让Polymer重新评估样式，然后将其应用于新内容？



我正在使用Meteor + Synthesis，如果这有所作为。

最佳答案

为了保持样式范围，您应该使用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，Polymer将应用样式范围，在Shadow DOM中，它应默认工作，但我没有进行测试，因此最好使用Polymer内置函数。

Polymer.updateStyles()仅在如下更改本地DOM css变量时起作用：this.customStyle['--my-toolbar-color'] = 'blue';

关于css - polymer :加载动态内容时重新加载样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39541782/