使用Polymer 3注入HTML

Question

我想在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格式的字符串（来自函数）添加到模板中的元素？

Answer 1

解决方案实际上非常简单：

return html`
  <div inner-h-t-m-l="[[myText]]"></div>
`;