Javascript 将样式应用于在Polymer中使用InnerHTML插入的元素

Javascript 将样式应用于在Polymer中使用InnerHTML插入的元素,javascript,html,css,dom,polymer,Javascript,Html,Css,Dom,Polymer,我有一些元素,其中包含元素的内容,我想格式化它,唯一有效的方法是更改InnerHTML。但是,本地样式表不适用于更改的内容。如何解决这个问题?以下是使用Polymer创建的自定义元素的代码部分: Polymer({ attached: function() { this.querySelector(".post-body").innerHTML = this.format(this.querySelector(".post-body").innerHTML); }, for

我有一些元素,其中包含元素的内容,我想格式化它,唯一有效的方法是更改InnerHTML。但是,本地样式表不适用于更改的内容。如何解决这个问题?以下是使用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>");
  },
});
聚合物({ 附加:函数(){ this.querySelector(“.post body”).innerHTML=this.format(this.querySelector(.post body”).innerHTML); }, 格式:函数(文本){ 返回文本。替换(/\n(+)\n/g,“$1

”; }, });
在本例中,我得到了正确的格式,但我的样式表样式不适用于其中的p元素。在更新HTML调用
this.updateStyles()
之后,是否有任何方法可以像将样式重新应用于页面或其他任何内容一样修复此问题?


更新HTML调用后
this.updateStyles()


圣埃凡似乎在另一条线索上击中了要害:

他的解决方案是使用天然聚合物DOM API来实现这一点

我遇到了与您描述的相同的问题:我可以让我的数据盖章,但是它永远不会被样式化。调用
this.updateStyles()
并没有解决我的问题,因为我用来标记的方法似乎没有在聚合方法中应用innerHTML

在我的示例中,我使用以下CSS进行样式设置:

p {
    font-weight: bold;
    color: red;
}
在您最初的帖子中,您使用的是Polymer DOM API。然而,对于其他阅读的人来说,这并不明显。按照预期使用以下数据戳:

var html = "<p>This is a test</p>";
this.$.myElementId.innerHTML = html;
在我的测试中,解决方案确实起到了作用,而且似乎是设置innerHTML的合适方法,它是通过
Polymer.dom

var html = "<p>This is a test</p>";
Polymer.dom(this.$.myElementId).innerHTML = html;
var html=“这是一个测试”

”; dom(this.$.myElementId).innerHTML=html;

在最后一个示例中,不需要调用
this.updateStyles()

圣埃凡似乎在另一条线索上击中了要害:

他的解决方案是使用天然聚合物DOM API来实现这一点

我遇到了与您描述的相同的问题:我可以让我的数据盖章,但是它永远不会被样式化。调用
this.updateStyles()
并没有解决我的问题,因为我用来标记的方法似乎没有在聚合方法中应用innerHTML

在我的示例中,我使用以下CSS进行样式设置:

p {
    font-weight: bold;
    color: red;
}
在您最初的帖子中,您使用的是Polymer DOM API。然而,对于其他阅读的人来说,这并不明显。按照预期使用以下数据戳:

var html = "<p>This is a test</p>";
this.$.myElementId.innerHTML = html;
在我的测试中,解决方案确实起到了作用,而且似乎是设置innerHTML的合适方法,它是通过
Polymer.dom

var html = "<p>This is a test</p>";
Polymer.dom(this.$.myElementId).innerHTML = html;
var html=“这是一个测试”

”; dom(this.$.myElementId).innerHTML=html;

在最后一个示例中,不需要调用
this.updateStyles()

我建议你看看这个问题/答案我建议你看看这个问题/答案