Lit-Html "object Object" code displays in the browser

user_225211 0
Viewed 1002

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.

lit-html lit-element web-component javascript
1 Answers

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

user_2252110
Related