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()仅在您更改Local DOM css变量时才有效：this.customStyle['--my-toolbar-color'] = 'blue';

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

1 个答案: