我想在Polymer 3中的模板中添加一些HTML格式的文本。这个HTML来自一个函数(使用'localize'从翻译文件中获取字符串),如:
This is <sup>®</sup> text.
我发现这样做的唯一方法是在模板中添加一个DIV标签和一些类(myText值来自函数):
return html`
<div class="marker">[[myText]]</div>
`;
...然后在ready()函数中,查询此元素并更改其innerHTML并用<sup>
标记替换文本(在本例中为®):
ready() {
super.ready();
var me = this;
setTimeout(function(){
var elements = me.shadowRoot.querySelectorAll(".marker");
elements.forEach(element => {
element.innerHTML = element.innerHTML.replace("®","<sup>®</sup>");
});
},500);
}
这有效,但我不喜欢超时方法,因为我永远不会确定它会一直有效,你会看到更改的延迟。
然而,我使用超时的原因是因为我没有找到任何生命周期事件,我确信所有元素都已呈现并可用。例如,如果我使用dom-if,那些元素还没有在ready()事件中呈现;所以我从querySelectorAll返回'null'。
所以我的问题是:是否有另一种方法(所以不使用超时方法)将HTML格式的字符串(来自函数)添加到模板中的元素?
解决方案实际上非常简单:
return html`
<div inner-h-t-m-l="[[myText]]"></div>
`;