Я хочу добавить некоторый текст в формате 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 (которая поступает из функции) к элементув шаблоне?