Lit-Html "object Object" 代码显示在浏览器中

Question

我的浏览器在网页中显示 JavaScript 代码，而不是我的自定义元素的预期输出。网页显示：

[object Object]

自定义元素的代码很简单：

import { LitElement } from 'https://jspm.dev/lit-element@2.3.1';
import { html } from 'https://jspm.dev/lit-html@1.2.1';
export class MyFooter extends LitElement {
  createRenderRoot() {
    return this;
  }
  render(){
    return html`
      foobar
    `;
  }
}
customElements.define('my-footer', MyFooter);

我没有使用 Node、NPM 或任何构建工具，只是从 JSPM CDN 导入 ES6 模块来加载 JavaScript。

Answer 1

回答我自己的问题，因为它可能对遇到此问题的其他开发人员有所帮助。

问题

问题是：在我的自定义元素中，我不止一次加载了 lit-html。一个版本的 lit-html 无法识别另一个版本的 TemplateResult，因此呈现 JavaScript 代码而不是 HTML。导入 LitElement 会隐式加载 lit-html 的最新版本（当时是 1.3.0 版）。显式导入 lit-html 1.2.1 版会引入版本冲突。在这种情况下，问题是由固定版本和在单独的导入语句中加载 LitElement 和 lit-html 引起的。在其他情况下，您可能会无意中加载冲突的 lit-html 版本。

解决方案

应该始终只有一个版本的 lit-html。您可以html在代码中多次使用该指令。但请确保导入语句仅加载 lit-html 的一个实例。

解析度

这是解决问题的导入表达式：

import { LitElement, html } from 'https://jspm.dev/lit-element@2.4.0';

在改进的代码中，单个 import 语句从同一源加载 LitElement 和 lit-html 模块，而不会发生版本冲突。

更多信息

我写了一篇更深入的文章，描述了 Node 和 NPM 的其他情况，使用 lit-html 指令until，以及一些关于指定版本范围以避免重大破坏性更改的一般建议。这是文章：

Lit-Html 故障排除：浏览器中的代码显示