2016-09-17 41 views
2

我包括使用<style include="style-name"></style>的样式,它通常工作正常。聚合物:加载动态内容时的重新加载样式

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

如何获得Polymer重新评估样式,并将其应用于新内容?


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

+0

你尝试调用'Polymer.updateStyles()'或'this.updateStyles()'? 查看[这里](http://stackoverflow.com/questions/30854101/change-style-programmatically)了解更多信息 –

回答

1

为了保持风格的范围,你应该使用聚合物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)); 
// ... 

这样,如果你使用的黑幕DOM聚合物将应用该样式范围,在影子DOM它应该在默认情况下工作,但我没有测试,所以更好地使用内置的功能聚合物。

Polymer.updateStyles()只有工作,当你改变本地DOM CSS变量是这样的:this.customStyle['--my-toolbar-color'] = 'blue';

+0

重要的部分是使用'Polymer.dom(element).innerHTML =“...”;而不仅仅是'element.innerHTML'。谢谢:) – Yorrd

+0

@Yorrd Im导入的模板文件什么是包含自定义元素,这就是为什么我使用importHref :)不客气! – adaliszk