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>$1</p>");
  },
});

在这个例子中，我得到了正确的格式，但我的样式表样式不适用于其中的P元素。无论如何要修复它，比如重新将样式应用于页面或其他任何内容？

Answer 1

更新HTML电话this.updateStyles()后。

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

Answer 2

st_efan似乎已经在另一个帖子中找到了钉子：https://stackoverflow.com/a/32306440

他的解决方案是使用原生的Polymer DOM API来实现这一目标。

我遇到了与你描述的问题相同的问题：我可以将我的数据加盖标记，但它永远不会被设置样式。调用(function () { "use strict"; angular.module("IP-APP").controller("detailController", detailController); function detailController ($routeParams, Item, Items) { var vm = this; vm.selectedItem = Items.GetById($routeParams.itemId); }; })();并没有解决我的问题，因为我用来标记的方法似乎没有在聚合方法中应用innerHTML。

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

this.updateStyles()

在您的原始帖子中，您正在使用Polymer DOM API。但是，对于其他人来说，这并不是那么明显。数据标记按预期使用以下内容：

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

但是，使用此方法永远不会允许应用于聚合物元素的CSS样式在innerHTML中生效。 Zikes建议的方法应该在某些情况下有效，但我相信它只应用通过var html = "This is a test"; this.$.myElementId.innerHTML = html;和host设置的自定义属性。以下内容在我的测试中不起作用。

mixins

最终在我的测试中工作的解决方案，似乎非常适合设置innerHTML的方法是var html = "This is a test"; this.querySelector("#myElementId").innerHTML = html; this.updateStyles();：

Polymer.dom

在最后一个示例中，无需拨打var html = "This is a test"; Polymer.dom(this.$.myElementId).innerHTML = html;。

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

2 个答案: