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

Question

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

在此示例中，我获得了正确的格式设置，但我的样式表样式不适用于其中的 P 元素。有没有什么方法可以修复它，比如将样式重新应用到页面或其他任何东西？

Answer 1

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

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

Answer 2

st_efan 似乎一语中的：

他的解决方案是使用原生PolymerDOMAPI来实现。

我遇到了与您描述的相同的问题：我可以让我的数据进行标记，但它永远不会被设置样式。调用 this.updateStyles() 没有解决我的问题，因为我用来标记的方法似乎没有在 Polymeric 方法中应用 innerHTML。

在我的示例中，我使用以下 CSS 样式：

p {
    font-weight: bold;
    color: red;
}

在您的原始 post 中，您使用的是聚合物 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();。

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

Applying styles to elements inserted with InnerHTML in Polymer

html

javascript

css

dom

polymer