Polymer: Reload Styles when loading dynamic content

问题

I'm including styles using <style include="style-name"></style> which generally works fine.

However, I have one element which dynamically loads and changes its contents via JavaScript. It will at some point load new content from some external source and update its contents accordingly. Those new contents do not have the style from style-name applied to them.

How do I get Polymer to reevaluate the styles and therefore also apply them to the new content?

---

I'm using Meteor + Synthesis if that makes a difference.

回答1:

For keep the style scope you should use Polymer importHref() and and dom() functions like this:

// ...
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));
// ...

This way polymer will apply the style scopes if you using the Shady DOM, in Shadow DOM it should be working by default, but I did not tested, so better to use the Polymer built in functions for that.

The Polymer.updateStyles() is only working when you changing the Local DOM css variables like this: this.customStyle['--my-toolbar-color'] = 'blue';

来源：https://stackoverflow.com/questions/39541782/polymer-reload-styles-when-loading-dynamic-content