javascript - 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 ，以及一些关于指定版本范围以避免重大破坏性更改的一般建议。这是文章:
Troubleshooting Lit-Html: Code Displaying in the Browser