O código Lit-Html “object Object” é exibido no navegador

Question

Meu navegador exibe o código JavaScript na página da Web em vez da saída esperada do meu elemento personalizado. A página da web mostra:

[object Object]

O código para o elemento personalizado é simples:

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

Não estou usando Node, NPM ou qualquer ferramenta de construção, apenas importando módulos ES6 do JSPM CDN para carregar JavaScript.

Answer 1

Respondendo à minha própria pergunta, pois pode ser útil para outros desenvolvedores que enfrentam esse problema.

O problema

Aqui está o problema: no meu elemento personalizado, carreguei lit-html mais de uma vez. Uma versão do lit-html não reconhece o TemplateResult da outra e, portanto, renderiza o código JavaScript em vez do HTML. A importação do LitElement carrega implicitamente a versão mais recente do lit-html (que era a versão 1.3.0 na época). A importação explícita do lit-html versão 1.2.1 introduziu um conflito de versão. Nesse caso, o problema foi causado pela fixação de versões e carregamento de LitElement e lit-html em expressões de importação separadas. Existem outras situações em que você pode carregar inadvertidamente versões conflitantes do lit-html.

A solução

Sempre deve haver apenas uma versão do lit-html. Você pode usar a htmldiretiva várias vezes em seu código. Mas certifique-se de que as expressões de importação carreguem apenas uma instância de lit-html.

Resolução

Aqui está uma expressão de importação que corrige o problema:

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

No código aprimorado, uma única expressão de importação carrega os módulos LitElement e lit-html da mesma fonte sem conflito de versão.

Mais Informações

Escrevi um artigo mais aprofundado, descrevendo outros casos com Node e NPM, com diretivas lit-html como until, e alguns conselhos gerais sobre a especificação de intervalos de versão para evitar grandes alterações. Aqui está o artigo:

Solução de problemas Lit-Html: exibição de código no navegador