Как получить ссылку на созданный 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 на самом деле создает TemplateResults, которые являются просто представлениями HTML, который будет создан один раз render() называется.

В этом смысле <div> внутри шаблона А не имеет особого "значения" в отношении 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>
    `;
  }
}