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

Applying styles to elements inserted with InnerHTML in Polymer

本文关键字：InnerHTML 插入 元素 样式 应用于 Polymer      更新时间：2023-09-26

我有一些元素，其中包含元素的内容，我想格式化它，唯一有效的方法是更改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>");
  },
});

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

更新HTML调用this.updateStyles()之后。

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

st_efan似乎在另一个线程中切中要害：https://stackoverflow.com/a/32306440

他的解决方案是使用原生的Polymer 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;

然而，使用这种方法将永远不会允许应用于聚合物元素的CSS样式在innerHTML中生效。Zikes建议的方法应该在某些情况下有效，但我认为它只应用通过host和mixins设置的自定义属性。以下内容在我的测试中不起作用。

var html = "<p>This is a test</p>";
this.querySelector("#myElementId").innerHTML = html;
this.updateStyles();

最终在我的测试中起作用的解决方案，似乎是设置innerHTML的合适方法，是通过Polymer.dom:

var html = "<p>This is a test</p>";
Polymer.dom(this.$.myElementId).innerHTML = html;

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

相关文章：