将样式应用于在Polymer中插入InnerHTML的元素 [英] Applying styles to elements inserted with InnerHTML in Polymer

问题描述

我有一些元素包含元素的内容，我想对它进行格式化，唯一的办法就是改变InnerHTML。但是，本地样式表不适用于已更改的内容。如何解决？以下是使用Polymer创建的自定义元素代码的一部分：

  Polymer（{
 attached：function（） {
 this.querySelector（。post-body）。innerHTML = this.format（this.querySelector（。post-body）。innerHTML）; 
}，
格式： function（text）{
 return text.replace（/ \\\
（。+）\\\
 / g，< p> $ 1< / p>）; 
}，
}）; 
  

在这个例子中，我得到了正确的格式，但是我的样式表样式不适用于P元素它。有没有办法修复它像重新应用样式到页面或其他任何东西？

解决方案

更新HTML调用 this.updateStyles（）。

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

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?

解决方案

After updating the HTML call this.updateStyles().

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

这篇关于将样式应用于在Polymer中插入InnerHTML的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！