Внедрить HTML с помощью Polymer 3 - PullRequest
Новая
       24

Внедрить HTML с помощью Polymer 3

0 голосов
/ 14 сентября 2018

Я хочу добавить некоторый текст в формате HTML к шаблону в Polymer 3. Этот 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 ();и поэтому я возвращаю 'null' из querySelectorAll.

Итак, мой вопрос: есть ли другой способ (не использующий тайм-аут подход) добавить строку в формате HTML (которая поступает из функции) к элементув шаблоне?

1 Ответ

0 голосов
/ 17 сентября 2018

Решение было на самом деле довольно простым: 

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