Использование функции html вне компонента, возвращающего [объект Object] LitElement

Question

У меня с этим болит голова, если кто знает, как решить, будет круто. Я использую LitElement для создания компонента таблицы, разработчик, который хочет его использовать, может добавить customHTML для рендеринга другого ввода. Для этого он / она может использовать свойство «заголовки», например:

      [{
  label: 'Created at',
  customHTML: (value, isEditable) => html`<custom-element .value="${value} .isEditable="${valueisEditable}"></custom-element>`
}]

Использование внутреннего компонента:

      <td>${header.customHTML()}</td>

Проблема, с которой я столкнулся, заключается в том, что когда я пытаюсь использовать этот customHTML внутри своего табличного компонента, он возвращает [object Object]. У вас есть какое-нибудь объяснение этому? Это можно решить?

Спасибо!

Answer 1

Это потому, что вы используете много версий lit-element .

Введите хромированную консоль window.litElementVersions и вы увидите, какие версии освещенного элемента вы используете.

Если вы перепутаете html тег из разных импортов из разных версий, вы получите [object Object].

Решение

Здесь нет никакого волшебства или чего-то особенного. Снова установить все пакеты

      rm -rf node_modules yarn.lock package-lock.json
npm i
# or
yarn install

Answer 2

Не так много кода, чтобы действительно понять проблему, но попробуйте использовать JSON.stringify(customHTML).

в виде строки будет более гибко печататься в виде текста.

Answer 3

[object Object] является представлением по умолчанию объекта, преобразованного в строку.

Пользовательский элемент html - это объект, на который вы ссылаетесь внутри <td> тег, который, вероятно, пытается преобразовать его в строку.