How do I add lit-html to an existing project?

Question

I understand I can import lit-html using a <script type="module"> tag in say index.html, but I can't access html or render from a separate JS script (e.g. index.js). Is this currently possible?

@Justinas Check this fiddle, I get an error when I attempt to use `html` in a different script https://jsfiddle.net/mike_seekwell/rzhofu81/265/ — howMuchCheeseIsTooMuchCheese, Nov 23 '18 at 13:18
Using ES Modules has different scopes from typical scripts. If you want to use `html` in multiple places, you have to import it in each of those locations. — abraham, Nov 24 '18 at 19:48
Thanks @abraham, but how would I import into an existing plain vanilla JS script (e.g. `index.js`)? — howMuchCheeseIsTooMuchCheese, Nov 24 '18 at 21:02
`lit-html` only has an ES Module build available. If you want to use it in a non-module context you'll have to process it with something like Rollup, Babel, or Webpack. — abraham, Nov 24 '18 at 21:31

score 1 · Answer 1 · answered Jan 05 '21 at 04:07

Sorry for answering an old question, but the docs may have been updated since 2018. Now they provide instructions on how to do this.

Install lit-html with npm:

npm install lit-html

Then import into your JS file like this:

import {html, render} from './node_modules/lit-html/lit-html.js';

Then you call html and render() where required (https://lit-html.polymer-project.org/guide/getting-started#rendering-a-template).

score 0 · Answer 2 · answered Nov 23 '18 at 13:04

Use this CDN in your index.html

<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.d.ts</script>
<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.d.ts.map</script>
<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.js.map</script>

Hope this will resolve uour problem

How do I add lit-html to an existing project?

2 Answers2