【问题标题】：Using html function outside component returning [object Object] LitElement在组件外部使用 html 函数返回 [object Object] LitElement
【发布时间】：2021-05-26 14:58:50
【问题描述】：

我对此感到头疼，如果有人知道如何解决它，那就太棒了。我正在使用 LitElement 创建一个表格组件，想要使用它的开发人员可以添加一个 customHTML 来呈现不同的输入。为此，他/她可以使用属性“headers”，如下所示：

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

使用内部组件：

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

我面临的问题是，当我尝试在我的表格组件中使用这个 customHTML 时，它返回 [object Object]。你对此有什么解释吗？有可能解决吗？

谢谢！

【问题讨论】：

你找到解决这个问题的方法了吗？
我将html方法发送到调用customHTML中：${header.customHTML(html)}

标签： javascript polymer lit-element lit

【解决方案1】：

[object Object] 是转换为字符串的对象的默认表示形式。

const house = {
  windows: 4,
  height: 5
}

console.log(house.toString());

自定义 html 元素是您在 <td> 标记内引用的对象，它可能试图将其转换为字符串。

【讨论】：

【解决方案2】：

没有太多代码可以真正理解问题，但尝试使用JSON.stringify(customHTML)。

作为字符串打印成文本会更灵活。

【讨论】：

【解决方案3】：

这是因为您使用了许多版本的 lit-element。

在 chrome 控制台中输入 window.litElementVersions，您将看到您使用的 lit 元素的版本。

如果你混淆了来自不同版本的不同导入的html标签，你会得到[object Object]。

解决办法

这里没有什么神奇的，也没有什么可做的。 重新安装所有软件包

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

【讨论】：