1

对于像我这样因各种原因不想使用自定义元素的疯狂人，有没有办法访问与 templateResult 相关的 DOM？

我尝试在渲染之前修改 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);

例如，我怎样才能从它的 id 自动在 componentA 的顶部元素上设置一个 id？

4

1 回答 1

0

事情lit-html实际上是创建TemplateResults，它们只是 HTML 的表示，一旦render()被调用就会被创建。

从这个意义上说，<div>内部 A 的模板对于TemplateResult表示它没有特殊的“意义”，但它的实例仍然可以正常地querySelect从渲染容器中编辑。

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

您仍然完全可以将 id 分配给<div>：

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

如果您只想在稍后阶段分配 id，您可以将其作为参数传递给创建 A 模板的函数：

const componentA = {
  // ...
  template(id) {
    return html`
      <div id=${id}></div>
    `;
  }
}
于 2019-02-18T22:52:18.020 回答