DEV Community

Render HTML with Vanilla JavaScript and lit-html

John Papa on October 14, 2019

Sometimes you need to render HTML elements on a web page. And like Goldilocks' search for "just right", you have to try a few techniques before you...

Read full post

Justin Fagnani • Oct 14 '19

Nice article!

typescript-lit-html-plugin is great, but I would recommend the ts-lit-plugin for tsc and lit-plugin for VS Code - they have a lot more features around type checking templates, and bindings to attributes and properties, including for custom elements. See github.com/runem/lit-analyzer/tree... and marketplace.visualstudio.com/items...

John Papa • Oct 14 '19

I’ll check those out. Thanks for sharing.

Bhanu • Oct 16 '19

thanks for the article, discovered about lit-html now!

curious to know why markup is created in JavaScript instead of HTML.

.... <!-- other markup -->
<li>
  <div class="card">
    <div class="card-content">
      <div class="content">
        <div class="name">${hero.name}</div>
        <div class="description">${hero.description}</div>
      </div>
    </div>
  </div>
</li>
.... <!-- other markup -->

then call this in JavaScript (with data) for dynamic rendering. given that there may be several dynamic components in a page that could help in code readability.

Justin Fagnani • Oct 22 '19

One reason is that those ${...} expressions are part of JavaScript, you can't just put that in HTML and have them do anything.

Another is that we don't have a great way of co-locating HTML and JavaScript right now. You could put HTML templates in the main document and your component in JS, but that's a pretty bad developer experience, and it would be tough-to-impossible to scale to 3rd party components.

And most importantly is that lit-html doesn't have any of its own control-flow constructs. It has no if-statements or loops - that's all left up to JavaScript. We'd have to re-implement these for HTML.

Hopefully soon we'll have HTML modules in the browser and then we can do something like this.

John Papa • Oct 22 '19

Thanks for contributing to the conversation!

Bhanu • Oct 26 '19

thanks for the reply, Justin!

John Teague • Oct 14 '19 • Edited

Well done! Justin has done a remarkable job keeping lit-html lean and mean. lit-html and it's equally lean base class lit-element really changed the way I think about creating applications. This article is a nice demonstration and introduction. It would be a great addition to the curated Awesome lit-html repo. github.com/web-padawan/awesome-lit...

John Papa • Oct 15 '19

Thanks! Looks like it was added.

Heiker • Oct 15 '19

Lit-html works great with a state management library like redux. I manage to create a TodoMVC app binding lit-html with a homemade redux using directives.

John Papa • Oct 15 '19

That's cool, thanks for sharing

Matei Adriel • Oct 15 '19 • Edited

Theres also haunted which adds react-like hooks to lit-html!

John Papa • Oct 15 '19

neat!

Shahjada Talukdar • Oct 14 '19

Cool post!

VS Code and Type Script
Here Type Script reminds me of old days people writing Share Point

Armand Syeed • Oct 15 '19

Using lit-HTML's declarative syntax, it is easy to build lightweight Web Components as well as use other existing Web Components in our applications. That really works for me.