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?

Answer 1

Use this CDN in your index.html

<script>https://cdn.jsdelivr.net/npm/[email protected]/lit-html.d.ts</script>
<script>https://cdn.jsdelivr.net/npm/[email protected]/lit-html.d.ts.map</script>
<script>https://cdn.jsdelivr.net/npm/[email protected]/lit-html.js.map</script>

Hope this will resolve uour problem

Answer 2

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