在理解 Lit-Element 文档中的事件处理程序示例时遇到问题

Question

在 Lit-Element 自述文件中，为什么事件处理程序示例需要变量替换：

event handler: html`<button on-click="${(e) => this._clickHandler(e)}"></button>`

即 - 我不明白表达式的哪一部分需要"替换" - 为什么事件处理程序不能只是硬编码，而不被包装在动态替换中？

Answer 1

实验表明，如果没有模板文本，该值将被解释为内容属性的值，该属性只能是字符串。

因此，以下 [不正确] HTML ：

<button id="x" on-click="(e) => console.log(e)"> <!-- DON'T DO THIS -->

等效于将字符串分配给on-click属性，而不是设置click-event 处理程序：

document.getElementById('id').setAttribute('on-click', '(e) => console.log(e)');

您可以在此演示中通过在按钮上运行getEventListeners()来确认此行为。