Возникли проблемы с пониманием примера обработчика событий в документации по Lit-Element

Question

В readme 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() на кнопке.