问题描述
我的浏览器在网页中显示JavaScript代码，而不是自定义元素的预期输出。该网页显示：
C[object Object]
我没有使用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应该始终只有一个版本。您可以在代码中多次使用import { LitElement } from 'https://jspm.dev/[email protected]';
import { html } from 'https://jspm.dev/[email protected]';
export class MyFooter extends LitElement {
createRenderRoot() {
return this;
}
render(){
return html`
foobar
`;
}
}
customElements.define('my-footer',MyFooter);
伪指令。但是请确保导入表达式仅加载lit-html的一个实例。
分辨率
这是一个可解决此问题的导入表达式：
html在改进的代码中，单个导入表达式从同一源加载LitElement和lit-html模块，而不会发生版本冲突。
更多信息
我写了一篇更深入的文章，描述了Node和NPM的其他情况，并使用了import { LitElement,html } from 'https://jspm.dev/[email protected]';
之类的lit-html指令，以及一些有关指定版本范围的一般建议，以避免重大的改动。这是文章：