无法理解Lit-Element文档中的事件处理程序示例

Question

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

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

I.e - 我不明白表达式的哪个部分需要“替换” - 为什么事件处理程序不能被硬编码，而不是被动态替换包裹？

Answer 1

实验表明，如果没有template literals，则该值会被解释为content attribute的值，其中只能是字符串。

所以，以下[不正确] HTML：

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

相当于将字符串分配给on-click属性，而不是设置click - 事件处理程序：

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

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