DEV Community

Discussion on: Render HTML with Vanilla JavaScript and lit-html

Collapse
 
bkamapantula profile image
Bhanu

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.

Collapse
 
justinfagnani profile image
Justin Fagnani

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.

Collapse
 
john_papa profile image
John Papa

Thanks for contributing to the conversation!

Collapse
 
bkamapantula profile image
Bhanu

thanks for the reply, Justin!