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.
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