lit-html: объединение строк для использования html``

Question

Я программирую веб-компонент с помощью lit-element и удивляюсь, как я могу отобразить строку внутри переменной, у которой все еще есть неповрежденные слушатели @click с html-обработчиком вместо чистой строки.

someFunction() {
    var someString=`<button @click="alert('hi')">blah</button>`;
    return html([someString]);
}
render() {
    return this.someFunction();
}

не работает, а

someFunction() {
    return html`<button @click="alert('hi')">blah</button>`
}
render() {
    return this.someFunction();
}

работает.

Спасибо за вашу помощь!

Answer 1

Это невозможно. Это два помеченных литерала шаблона и вызов функции принципиально разными вещами:

тег с литералом шаблона

html`<button @click="alert('hi')">blah</button>`

Вызов html в качестве теговой функции шаблона вызовет html функцию с параметрами n-аргумента. Первым будет массив константной части шаблона, а вторые аргументы будут интерполированы.

Обычный вызов функции

const someString = `<button @click="alert('hi')">blah</button>`;
html([someString]);

Вызов html в качестве функции html([someString]) вызовет эту функцию с массивом в качестве первого аргумента.

Будучи языковой функцией, браузер должен понимать помеченный шаблон из обычной функции. Это происходит на лексическом / синтаксическом уровне, и поэтому за теговой функцией должен и должен следовать символ обратного кавычка (`).

В итоге, помеченная функция html не может существовать без обратного удара. Вы можете прочитать больше здесь на MDN документы .