Lit-html 以 DOM 节点为目标

问题描述

想象一下，我有一个模板，旁边有一个按钮和一个微调器。当按下按钮时，如何告诉微调器出现？

return `html
  <button @click=${handleClick}>Press</button>
  <div class="spinner"></div>
`

我希望能够在“handleClick”中定位这个特定的微调器，而不是页面中的其他一些（可能有很多我们不知道）。在 React 中，我们可以使用 refs。

解决方法

这实际上取决于您如何渲染其他微调器以及它们的位置。在您提供的模板中，您可以使用如下绑定（另外，我不知道此微调器如何激活，因此我假设它使用 active 类）：

import {render,html} from 'lit-html';

const spinnerActive = false;

const handleClick = () => {
  spinnerActive = true;
  renderTemplate();
}

const template = html`
  <button @click=${handleClick}>Press</button>
  <div class="spinner ${spinnerActive ? 'active' : ''}"></div>
`;

const renderTemplate = () => {
  render(template,<Host DOM node>);
};