user2733016 user2733016 - 4 months ago 47
Javascript Question

Applying styles to elements inserted with InnerHTML in Polymer

I have some element that contains content of element in it and I want to format it and the only way that worked is changing InnerHTML. However, local stylesheet doesn't apply to changed content. How to fix that? Here's the part of the code of a custom element created with Polymer:

Polymer({
attached: function() {
this.querySelector(".post-body").innerHTML = this.format(this.querySelector(".post-body").innerHTML);
},
format: function(text) {
return text.replace(/\n(.+)\n/g, "<p>$1</p>");
},
});


In this example I get the right formatting but my stylesheet styles don't apply to the P element inside it. Is there anyway to fix it like re-applying styles to page or anything else?

Answer

After updating the HTML call this.updateStyles().

https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api