用聚合物 3 注入 HTML

Question

我想在 Polymer 3 的模板中添加一些 HTML 格式的文本。这个 HTML 来自一个函数（它使用 'localize' 从翻译文件中获取字符串） , 比如:

This is <sup>®</sup> text.

我发现这样做的唯一方法是在模板中添加一个 DIV 标签和一些 class（myText 值来自函数）：

return html`
  <div class="marker">[[myText]]</div>
`;

...然后在 ready() 函数中，查询此元素并更改其内部 HTML 并通过用 <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>
`;

用聚合物 3 注入 HTML

Inject HTML with Polymer 3

web-component

polymer

polymer-3.x