3

My browser displays JavaScript code in the web page instead of the expected output from my custom element. The web page shows:

[object Object]

The code for the custom element is simple:

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

I am not using Node, NPM, or any build tooling, just importing ES6 modules from the JSPM CDN to load JavaScript.

Daniel Kehoe
  • 10,952
  • 6
  • 63
  • 82

1 Answers1

10

Answering my own question as it may be helpful for other devs encountering this problem.

The problem

Here’s the problem: In my custom element, I loaded lit-html more than once. One version of lit-html does not recognize the TemplateResult of the other and therefore renders JavaScript code instead of HTML. Importing LitElement implicitly loads the newest version of lit-html (which was version 1.3.0 at the time). Explicitly importing lit-html version 1.2.1 introduced a version conflict. In this case, the problem was caused by pinning versions and loading LitElement and lit-html in separate import statements. There are other situations where you may inadvertently load conflicting versions of lit-html.

The solution

There should always be only one version of lit-html. You can use the html directive multiple times in your code. But make sure the import statements only load one instance of lit-html.

Resolution

Here is an import expression that fixes the problem:

import { LitElement, html } from 'https://jspm.dev/lit-element@2.4.0';

In the improved code, a single import statement loads LitElement and lit-html modules from the same source without a version clash.

More information

I've written an article that goes into more depth, describing other cases with Node and NPM, with lit-html directives such as until, and some general advice about specifying version ranges to avoid major breaking changes. Here's the article:

Troubleshooting Lit-Html: Code Displaying in the Browser

Patrick McElhaney
  • 57,901
  • 40
  • 134
  • 167
Daniel Kehoe
  • 10,952
  • 6
  • 63
  • 82
  • 1
    Good article. Does this mean Design Systems built with Lit version X can't work together with other 3rd party Components built with Lit version Y?? – Danny '365CSI' Engelman Aug 26 '20 at 18:12
  • @Danny'365CSI'Engelman: Thanks! Clashing versions of lit-html are only a problem within the implementation of a single custom element. Web components are encapsulated by design so you can mix any custom elements on a page without concern for the details of their implementation. – Daniel Kehoe Aug 27 '20 at 02:25
  • I was using `haunted` which adds some react style hooks to lit-html's templating. haunted was expecting me to use the version of lit-html it has as a subdep, but I had added lit-html as a dep directly, which were two different versions. – Lawrence_NT Feb 08 '22 at 22:20