Kode "Objek Objek" Lit-Html ditampilkan di browser

Question

Browser saya menampilkan kode JavaScript di halaman web alih-alih output yang diharapkan dari elemen kustom saya. Halaman web menunjukkan:

[object Object]

Kode untuk elemen kustom sederhana:

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

Saya tidak menggunakan Node, NPM, atau build tooling apa pun, hanya mengimpor modul ES6 dari JSPM CDN untuk memuat JavaScript.

Answer 1

Menjawab pertanyaan saya sendiri karena mungkin dapat membantu developer lain yang mengalami masalah ini.

Masalah

Inilah masalahnya: Dalam elemen kustom saya, saya memuat lit-html lebih dari sekali. Satu versi lit-html tidak mengenali TemplateResult yang lain dan oleh karena itu merender kode JavaScript, bukan HTML. Mengimpor LitElement secara implisit memuat versi terbaru dari lit-html (yang saat itu adalah versi 1.3.0). Mengimpor lit-html versi 1.2.1 secara eksplisit menimbulkan konflik versi. Dalam kasus ini, masalahnya disebabkan oleh versi pin dan memuat LitElement dan lit-html dalam ekspresi impor terpisah. Ada situasi lain di mana Anda mungkin secara tidak sengaja memuat versi lit-html yang berkonflik.

Solusinya

Hanya boleh ada satu versi lit-html. Anda dapat menggunakan htmlperintah tersebut beberapa kali dalam kode Anda. Tetapi pastikan ekspresi impor hanya memuat satu contoh lit-html.

Resolusi

Berikut adalah ekspresi impor yang memperbaiki masalah:

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

Dalam kode yang ditingkatkan, satu ekspresi impor memuat modul LitElement dan lit-html dari sumber yang sama tanpa bentrokan versi.

Informasi lebih lanjut

Saya telah menulis artikel yang lebih mendalam, menjelaskan kasus lain dengan Node dan NPM, dengan arahan lit-html seperti until, dan beberapa saran umum tentang menentukan rentang versi untuk menghindari perubahan besar yang merusak. Berikut artikelnya:

Pemecahan Masalah Lit-Html: Menampilkan Kode di Browser