Javascript Lit Html"；“对象对象”；代码显示在浏览器中

我的浏览器在网页中显示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。

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

问题 问题是：在我的自定义元素中，我多次加载了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';

在改进的代码中，单个导入表达式从同一源加载LitElement和lit html模块，而不会发生版本冲突

更多信息 我已经写了一篇更深入的文章，描述了Node和NPM的其他情况，以及诸如

到
等lit html指令，以及一些关于指定版本范围以避免重大突破性更改的一般建议。以下是文章：

好文章。这是否意味着使用Lit版本X构建的设计系统不能与使用Lit版本Y构建的其他第三方组件协同工作？？？@Danny'365CSI'Engelman:谢谢！lit html的冲突版本只是单个自定义元素实现中的一个问题。Web组件通过设计进行封装，因此您可以在页面上混合任何自定义元素，而无需关心其实现的细节。哦，我的天哪，您为我节省了2小时的调试时间！！！