使用 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>
`;