Как получить ссылку на созданный DOM из templateResult (без использования пользовательских элементов)

Question

Для тех сумасшедших людей, как я, которые по разным причинам не хотят использовать пользовательские элементы, есть ли способ получить доступ к DOM, связанному с templateResult?

Я пытался изменить содержимое templateResult перед рендерингом, но безуспешно ... Я также изучил templateFactory, но, похоже, он предназначен для предельного (родительского) templateResult, отображаемого в контейнере, а не во вложенном templateResults.

const componentA = {
    id: 'comp-a',  
    template(){ return html`<div>No ID yet</div>` }
};
const app = {
    template(){
        const tmpl = html`<main><div>${ componentA.template() }</div></main>`
        // here: use componentA.id to set top element's id
        // seems it's too late to change the template, DOM is already created?
        // so how to get a reference to the created DOM from a templateResult?
        return tmpl
    }
};
render( app.template(), document.body);

Например, как я могу автоматически установить идентификатор для верхнего элемента componentA из его идентификатора?

Answer 1

Дело в том, что lit-html фактически создает TemplateResult s, которые являются просто представлениями HTML, который будет создан после вызова render().

В этом смысле <div> внутри шаблона A не имеет особого «значения» относительно TemplateResult, представляющего его, но его экземпляры все же обычно можно querySelect удалить из контейнера рендеринга.

const tmpl = html`
  <main>
    <div>
      ${componentA.template()} <!-- This returns a TemplateResult -->
    </div>
  </main>
`;

Вы все еще можете назначить идентификатор для <div>:

const componentA = {
  // ...
  template() {
    return html`
      <div id="comp-a"></div>
    `;
  }
}

Если вы хотите назначить идентификатор только на более позднем этапе, вы можете передать его в качестве аргумента функции, которая создает шаблон А:

const componentA = {
  // ...
  template(id) {
    return html`
      <div id=${id}></div>
    `;
  }
}