Der Lit-Html-Code „Objekt Objekt“ wird im Browser angezeigt

Question

Mein Browser zeigt JavaScript-Code auf der Webseite anstelle der erwarteten Ausgabe von meinem benutzerdefinierten Element an. Die Webseite zeigt:

[object Object]

Der Code für das benutzerdefinierte Element ist einfach:

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);

Ich verwende kein Node, NPM oder Build-Tool, sondern importiere nur ES6-Module aus dem JSPM-CDN, um JavaScript zu laden.

Answer 1

Beantwortung meiner eigenen Frage, da dies für andere Entwickler hilfreich sein kann, die auf dieses Problem stoßen.

Das Problem

Hier ist das Problem: In meinem benutzerdefinierten Element habe ich lit-html mehr als einmal geladen. Eine Version von lit-html erkennt das TemplateResult der anderen nicht und rendert daher JavaScript-Code anstelle von HTML. Durch das Importieren von LitElement wird implizit die neueste Version von lit-html geladen (die zu diesem Zeitpunkt Version 1.3.0 war). Das explizite Importieren von lit-html Version 1.2.1 führte zu einem Versionskonflikt. In diesem Fall wurde das Problem durch das Fixieren von Versionen und das Laden von LitElement und lit-html in separaten Importausdrücken verursacht. Es gibt andere Situationen, in denen Sie möglicherweise versehentlich widersprüchliche Versionen von lit-html laden.

Die Lösung

Es sollte immer nur eine Version von lit-html geben. Sie können die htmlDirektive in Ihrem Code mehrmals verwenden. Stellen Sie jedoch sicher, dass die Importausdrücke nur eine Instanz von lit-html laden.

Auflösung

Hier ist ein Importausdruck, der das Problem behebt:

import { LitElement, html } from 'https://jspm.dev/[email protected]';

Im verbesserten Code lädt ein einzelner Importausdruck LitElement- und lit-html-Module ohne Versionskonflikt aus derselben Quelle.

Mehr Informationen

Ich habe einen Artikel geschrieben, der ausführlicher behandelt und andere Fälle mit Node und NPM beschreibt, mit lit-html-Anweisungen wie untilund einigen allgemeinen Ratschlägen zum Festlegen von Versionsbereichen, um größere Änderungen zu vermeiden. Hier ist der Artikel:

Fehlerbehebung bei Lit-Html: Code wird im Browser angezeigt