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

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

1 Answer 1

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/[email protected]';

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

3
  • 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?? Aug 26, 2020 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. Aug 27, 2020 at 2: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. Feb 8, 2022 at 22:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.